CSS 类名未应用于 React 组件

Question

感谢您的时间和帮助。我花了几个小时试图弄清楚这个问题似乎无法弄清楚。

我有这个反应组件：

import styles from './style.scss';

class ButtonComponent extends React.Component { 
  render() {
    return (
      <div className={styles.bunny}>
        hello world
      </div>
    );
  }
}

和 scss 文件：

.bunny {
  display: block;
  margin-top:50px;
  margin-bottom:55px;
  background-color: blue;
}

当我加载 html 时，div 没有类名，而我希望它是

<div class="bunny">

当我像这样将类名放入反应组件中时：

<div className="bunny"> 

然后我就可以在浏览器中看到className了。

我做错了什么？

提前非常感谢您。

Answer 1

首先，您需要保证它的定义为：

console.log(styles)

我不确定您是否正确导入了 style.scss。

Answer 2

您需要导入您的 scss，例如...

import './styles.scss';

Webpack 将负责捆绑您的样式，以便您可以将 className 作为字符串添加到组件上。

<div className="bunny">Hello World</div>

Answer 3

也有类似的问题。原来我把样式文件命名不是news.module.scss，而是news.modules.scss。将“modules”重命名为“module”并导入文件后，className 开始工作

Answer 4

解决这个问题的方法是将我的 scss 文件的名称从

style.scss

更改为

style.module.scss

Answer 5

对我来说这是因为我使用commonjs的

require

来加载es模块。

Answer 6

我遇到了不同的问题，这里没有提到，但这会导致相同的行为（类名只是没有添加到输出中）：确保为类名使用有效的 css 标识符。

我用了蛇盒：

.spanning-grid-item {
  flex-grow: 1;
}

但我应该使用驼峰命名法：

.spanningGridItem {
  flex-grow: 1;
}