A fundamental problem with CSS is that it's globally scoped.
So, if you have a number of components in your React app, you would have to think of unique classes to name your components.
And the bigger your app gets, the harder.
This is where CSS modules come in.
CSS modules let you create CSS files that are locally scoped.
Here's how you do it;
- Create a CSS file with
- In your component, use
import * as anyName from 'relative path'
- And in yout jsx elements, use
- In your module.css file, use
.nameofclassto select the elements
Note that, you can select child elements with .nameofclass element name as well (.container button)
This way, you don't have to worry about thinking of unique names to name your class.
Note: Css modules are not intrinsic css features. On compilation, they get compiled to normal css. You would need the right compiler configuration to be able to use this. If you use web pack, it's already included.
If you found this useful, let me know in the comments. if there's a better way to CSS in react, drop a comment