Node + React -连字符的CSS类名
Node + React -连字符的CSS类名
提问于 2016-03-06 21:22:41
我目前使用的是react-starter-kit，有几个react组件，每个组件都有自己的样式文件(scss)。基本上，每个组件都在顶部导入样式文件，如下所示：
import s from './Header.scss';现在，对于没有连字符的css类(例如：‘通知’)，我可以使用它没有任何问题，但我不知道如何使用连字符的css类：
render() {
return (
<div className={s.header-inner}> </div>
);
}这显然会抛出一个错误：“内部未定义”。
我把header-inner改成了header_inner，在我的组件中也是一样的，它工作得很好，但是我不能这么做，因为我的css文件太大了，有几百个类。
任何帮助都将不胜感激。
谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-03-06 21:25:34
-不是有效的标识符字符，因此您的原始代码将被评估为：
s.header - inner您还没有定义一个名为inner的变量，因此会得到一个引用错误。
但是，任何字符都可以用来构成对象的键，因此您可以使用字符串来访问所需的属性。
return (
<div className={s['header-inner']}> </div>
);Stack Overflow用户
发布于 2016-10-19 11:48:56
您可以逐点设置css类，而无需在括号内使用字符串。
请参阅https://github.com/webpack/css-loader
如果您将webpack配置的css-loader设置为
css-loader?camelCase现在你可以这样做了
<div className={s.headerInner}> </div>Stack Overflow用户
发布于 2016-03-06 21:26:28
s['header-inner']在Javascript中，点符号很方便，但它不适用于非法变量。在这种情况下，请使用括号表示法。
同样，这是无关的，但你可能很快就会遇到这个问题: javascript中的CSS样式被转换为camelCase。因此，如果您正在设置样式：
<div style={{ backgroundColor: '#FFF', zIndex: 3 }} />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35827356
复制相关文章
相似问题
腾讯云开发者
