I am developing my own library of react components. I am using rollup to create the build. I also want to ship css along with it which i bundled into a single styles.css file. My concern is how a user would use it. They can simply import the components using import { Component1, Component2 } from 'my-library' but they are not styled by default. This can be solved by importing the css file: import 'my-library/build/styles.css' but i feel like this import is redundant, i want the css file to be included by default in my library index.js file. I am not sure how can i achieve this.
I am using rollup and rollup-plugin-postcss.
So my question is how do i do this? Should i use some rollup plugin? Is my idea right in the first place? Maybe i should leave it to the user to decide how they want it bundled because my approach forces them to use some loader for css files?
If you want to ship external styles (instead of e.g. a CSS-in-JS system such as Emotion), that "redundant import" way is the standard, exactly because you can't know how the user of your library wants the styles applied to their page, or which loader (or bundler!) they'd want to use.
It's also possible there's no document to inject styles into at all, in case your users are server-side-rendering your component to be hydrated on the client side.
Related
I am trying to configure a NextJS project. I want to use CSS modules. However, I don't want to add *.module.* extension to file names and thus adding it to import paths, since it seems to me as excessive.
I found in css modules documentation that they didn't use module extension.
I tried to customize webpack configuration with loaders within next.config. Without any luck.
So, I am wondering if there is any way to be able to use just someName.css in NextJS. Then I could import it to my component just like this: import style from './someName.css'
I am trying to use two snippets as components from bootsnipp, and each snippet has its own css. i tried to put them both in the style.css, but it ended up damaging one component for the other to look fine.
I'm thinking about how to use both these styles.css, since in the index.js i can only import style.css.
can i use router to use multiple pages, and import style.css in the second page? but wouldn't that mean i'll have to use the second page as app.js, which is called only once in react? this is kind of confusing me.
EDIT: can I put the css of one component in another css file, and then import it INSIDE that component instead of index.js?
it doesn't bother me by the way whether i put that component inside index.js or not; in fact, I'm not going to use it there.
I would say you need to deal with the global namespace issue. You could create two components with its own css file.
Then add a unique className to stop collisions.
The benefit here is that you could also enable code spitting, so you would only load html/css/js when you need it (see React.lazy).
—-
By trying to load two styles in different times or manners you will still have the same issue of conflicting styles.
I know this is a very bad approach when we try to add two different css frameworks in a single project. But for now, due to a project requirement, I need to add bootstrap and materialize css in a project. In root component bootstrap is used, and in child component I will use materialize.
In child component I have included materialize in the following way
import React, {Component} from 'react';
import {findDOMNode} from 'react-dom';
import screenFull from 'screenfull';
import material from 'materialize-css/dist/css/materialize.css';
import './Control.css';
but adding this way overlaps bootstrap classes which is obviously not the required behaviour.
I want to limit scope of materialize.css inside the child component only. Can anyone give me a suggestion on this?
Note: Root component was developed before, and create-react-app is not used over there. webpack configuration file has been written manually.
Please use https://fezvrasta.github.io/bootstrap-material-design/ for your project as it's based on the bootstrap the UI will have look and feel like material and you haven't to change the existing code. I recommended to use only one UI framework for you project.
As I have seen that you are facing a problem where you need to include both the css framework, I better suggest you to use https://mdbootstrap.com/.
The second thing which I suggest you is to include in your application not for specific component. If you want to make some change for specific component look and feel create separate css/scss file and include it to you component.
I'm trying to break up my monolithic React app into reusable parts that can be shared with other projects.
I want to extract some generic components (e.g. Button, Header, Dropdown, etc.) into my own little UI library. The problem I'm running into is how to manage the CSS. Right now, my app just has a single stylesheet that takes care of everything.
These are the solutions I have seen:
Embed the CSS styles for each component in the JS for the component itself (CSS in JS).
import or require the CSS files in the JS for the component and use webpack to bundle the CSS file for you.
I really don't love either option. I understand the appeal of co-locating the styles with the component, but I feel like: a) it clutters the component definition, and b) it fights with how CSS works (no more taking advantage of cascading styles since everything is so tightly scoped to the individual component).
And, I can't bring myself to import a CSS file. That just feels so wrong. We're not even writing javascript anymore at that point.
I realize that these aren't exactly popular opinions, but is there a 3rd option that I'm missing for getting a good old fashioned CSS file from an NPM module that I can just drop in my HTML and use? Ideally one that doesn't involve copy/pasting it from node_modules. :)
Thanks to the tip from #EmileBergeron I found the PostCSS import plugin. It can find and inline stylesheets in node_modules and in your own code.
So, my workflow will be:
npm install my-ui-library
Import the React components you want to use into your JS files import { Button } from 'my-ui-library'
Import the corresponding stylesheets into your CSS files #import 'my-ui-library/Button.css'
That way I'm importing CSS into CSS and JS into JS which feels a lot more natural to me. It might also make sense to just have one stylesheet for all components instead of breaking it up per-component, but that's a detail I can figure out later.
Then, I just need to add PostCSS into my build system to inline everything which has been pretty simple in testing.
I'm working on a React app. I have a few different stylesheets to restyle the same elements. Let's say for sake of this question I have two that have identical elements but different styles. Right now, in the app, I just import it with:
import './Stylesheet1.css';
What I'd like to do is, based on a setting for that customer in a database, it would switch to using ./Stylesheet2.css instead.
I know there are extra modules to include out there that may help and I could do things with dynamically building stylesheets and I may need to go to those options, but for now, I'd like to see if there is simply some way to dynamically swap out which CSS file I'm pointed to.
Well another way you can do this is as follow:
import style1 from './Stylesheet1.css';
import style2 from './Stylesheet1.css';