Currently, my project utilizes react-starter-kit and includes several react components, each with its own styling file (scss). Every component imports the styling file at the top like this:
import s from './Header.scss';
When it comes to using css classes without hyphens (e.g. 'notification'), there are no issues. However, I am struggling to use hyphenated css classes:
render() {
return (
<div className={s.header-inner}> </div>
);
}
Unfortunately, this results in an error: 'inner is undefined'.
I attempted to change header-inner to header_inner both in my html and in the component, which worked fine. However, due to the large number of classes in my css file, manually changing them all is not feasible.
If anyone has any suggestions or solutions, your help would be greatly appreciated.
Thank you!