Reputation:
I just started with React and have a simple question I couldn't find anywhere.
So, should every React component have its own stylesheet?
For example if I have my main App component which I render to the browser should I just include a css file there and have all my styles in that or is it better to have an own css file for every component?
Upvotes: 10
Views: 7489
Reputation: 2124
CSS best practices in React are still heavily debated. There are pros and cons to each variation.
What you are probably looking for is modularity in your CSS. While having unique style sheets for your components does accomplish this to some degree I suggest taking a look at CSS modules. Packages like this can keep your CSS contained to a specific component so you don't over-write styles on other components.
Personally, I've done a little bit of both. I use a base style sheet (bootstrap for example). Then I use CSS-modules to help me make components that are unique that I might want to easily port over to other projects.
Upvotes: 9