Hey Ratul- You can and should have separate style sheets. You import them at the top of the page like so:
import React from “react”;
import “./myStyles.css”;
My blog post is just if you want dynamic styles and can’t use media queries :)
And even then, most of the time you just change the class. You would write the styles for two classes in your style sheet like “.dark-mode-on” and “.dark-mode-off” and then in your JS file toggle between giving the JSX element one of the two classes.
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?
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
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey Ratul- You can and should have separate style sheets. You import them at the top of the page like so:
import React from “react”;
import “./myStyles.css”;
My blog post is just if you want dynamic styles and can’t use media queries :)
And even then, most of the time you just change the class. You would write the styles for two classes in your style sheet like “.dark-mode-on” and “.dark-mode-off” and then in your JS file toggle between giving the JSX element one of the two classes.
oh got it. Thanks a lot for explaining brother :)
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?
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