Hassan Tariq Hassan Tariq - 1 month ago 8
CSS Question

Node + React - Hyphenated CSS Class Names

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

Answer

- 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>
);
Comments