Hi all, I'm struggling to understand something. A style sheet for one component on my react project seems to be effecting the styles in another. I thought this was not suppose to happen with localised style sheets and components. Can anyone educate me?
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (4)
If the stylesheet has general selectors like
p
then they'll affect all paragraph tags. This is why every React component has classes for pretty much everything, and a big reason why the HTML looks so cluttered.These sort of selectors will have global effects when the stylesheet is loaded with all the others:
The exception is if you load the stylesheet as a module:
This takes care of the random class names for you, producing something like this:
which is guaranteed by the build system not to conflict with any other style. Everything in a style module should be a class definition, and it'll all happen by magic.
Here's the official documentation.
Adding a CSS Modules Stylesheet
Make your life less complicated and use a CSS in JS library like emotion or styled components... Or even better, use a UI framework like @mui that has CSS in JS built in 😬
Halo, halo. Your regular asian guy is here to help you. But first, I require a screenshot. Yes, you need to send screenshot of code and site if not it is not clear 🥺