Node + React - 连字符CSS类名

Question

我目前正在使用react-starter-kit并且有一些反应组件,每个组件都有自己的样式文件(scss).基本上,每个组件都在顶部导入样式文件,如:

import s from './Header.scss';

现在,对于没有连字符的css类(例如:'notification'),我可以毫无问题地使用它,但我无法弄清楚如何使用带连字符的css类:

render() {
 return (
  <div className={s.header-inner}> </div>
 );
}

这显然会引发错误:'内部未定义'.

我在我的组件中更改header-inner为header_inner相同并且它工作正常,但我不能这样做,因为我的css文件非常庞大,有数百个类.

任何帮助将非常感激.

谢谢

Answer 1

- 不是有效的标识符字符,因此您的原始代码将被评估为:

s.header - inner

您尚未定义一个名为的变量,inner因此您会收到引用错误.

但是,任何字符都可用于构成对象的键,因此您可以使用字符串来访问所需的属性.

return (
  <div className={s['header-inner']}> </div>
);

Answer 2

您可以逐点设置css,而不使用括号内的字符串.

如果你将webpack config的css-loader设置为

css-loader?camelCase

现在你可以做这样的事情了

<div className={s.headerInner}> </div>