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，而不使用括号内的字符串。

请参阅https://github.com/webpack/css-loader

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

css-loader?camelCase

现在你可以做这样的事情

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

Answer 3

s['header-inner']

在Javascript中，点符号是一种方便，但它不适用于非法变量。在这种情况下，请使用括号表示法。

另外，不相关但你很快就会遇到这种情况：javascript中的CSS样式变成了camelCase。所以，如果您正在设置样式：

<div style={{ backgroundColor: '#FFF', zIndex: 3 }} />