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

Posted 2023-02-22

【中文标题】Node + React - 带连字符的 CSS 类名

【英文标题】：Node + React - Hyphenated CSS Class Names

【发布时间】：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 类，而无需在括号内使用字符串。

见https://github.com/webpack/css-loader

如果你将 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  />

【讨论】：

是的，明白了。谢谢！