DEV Community

Discussion on: Project 41 of 100 - Writing Responsive CSS in JSX

johnyepthomi profile image
JohnYepthomi • Edited on

Worst thing about react is that styles are effected from any CSS files that matches the elements even if it's not from the CSS intented for that component. Like style leak. And we have to resort to styled components and crap. Is there a way to tie a CSS to a component without leaks?

Thread Thread
betoshiver profile image
Alberto Shiver

Yes, there is an easy way, you can do CSS modules, (styles.module.css) that way it'll only take the styles from the specified module even if another module had the same class name.

When you declare a className on a jsx component it goes like this example:

className ={module1.btn}

It'll only apply the styles for btn that are declared on the module1 module