Node + React - 带连字符的 CSS 类名答案

【问题标题】：Node + React - Hyphenated CSS Class NamesNode + React - 带连字符的 CSS 类名
【发布时间】：2016-06-20 00:52:03
【问题描述】：

我目前正在使用react-starter-kit 并且有一些反应组件，每个组件都有自己的样式文件（scss）。基本上，每个组件都会在顶部导入样式文件，例如：

import s from './Header.scss';

现在，对于没有连字符的 css 类（例如：'notification'），我可以毫无问题地使用它，但我不知道如何使用带连字符的 css 类：

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

这显然会引发错误：'inner is undefined'。

我将header-inner 更改为header_inner，并且在我的组件中也是如此，它工作正常，但我不能这样做，因为我的 css 文件非常庞大，包含数百个类。

任何帮助将不胜感激。

谢谢

【问题讨论】：

【解决方案1】：

您可以通过点设置 css 类，而无需在括号内使用字符串。

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

css-loader?camelCase

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

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

【讨论】：

【解决方案2】：

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

s.header - inner

您尚未定义名为 inner 的变量，因此您会收到引用错误。

但是任何字符都可以用来组成一个对象的键，所以你可以使用字符串来访问你想要的属性。

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

【讨论】：

【解决方案3】：

s['header-inner']

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

另外，不相关但您可能很快也会遇到这种情况：javascript 中的 CSS 样式变成了驼峰式。因此，如果您要设置样式：

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

【讨论】：