An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
May 18, 2021 06:15 pm GMT
Original Link: https://dev.to/fawazsullia/less-annoying-css-in-react-with-css-modules-38kk
Less annoying CSS in React with CSS modules
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
.module.css
extension - In your component, use
import * as anyName from 'relative path'
- And in yout jsx elements, use
className={anyName.nameofclass}
- In your module.css file, use
.nameofclass
to 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.
If you found this useful, let me know in the comments. if there's a better way to CSS in react, drop a comment
Original Link: https://dev.to/fawazsullia/less-annoying-css-in-react-with-css-modules-38kk
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To