I'm currently using react-starter-kit
and have a few react components each with their own styling file (scss). Basically, every component imports styling file on top like:
import s from './Header.scss';
Now, for css classes that do not have hyphens (e.g: 'notification'), I can use it without any problem, but I can't figure out how to use hyphenated css classes:
render() {
return (
<div className={s.header-inner}> </div>
);
}
This obviously throws an error: 'inner is undefined'.
I changed header-inner
to header_inner
and the same in my component and it works fine but I can't do it as my css file is pretty huge with hundreds of classes.
Any help would be really appreciated.
Thanks
CSS is a hyphen-delimited syntax language which means while writing HTML attributes we can use hyphen(-). Example: font-size, line-height, background-color, etc...
It is very easy to choose a valid class name or selectors in CSS just follow the rule. A valid name should start with an underscore (_), a hyphen (-) or a letter (a-z)/(A-Z) which is followed by any numbers, hyphens, underscores, letters.
A CSS Module is a CSS file that defines class and animation names that are scoped locally by default.
-
isn't a valid identifier character, so your original code would be evaluated as:
s.header - inner
You haven't defined a variable called inner
so you get a reference error.
However any character can be used to make up a key for an object, so you can use a string to access the property you want.
return (
<div className={s['header-inner']}> </div>
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With