javascript - Css 类名不适用于反应组件

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"> 

然后我可以在浏览器中看到类名。

我究竟做错了什么？

非常感谢你。

Answer 1

首先，您需要保证它的定义是：console.log(styles) 我不确定您是否正确导入 style.scss。

Answer 2

你需要像导入你的scss... import './styles.scss';

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

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

Answer 3

对我来说，这是因为我使用 commonjsrequire来加载 es 模块。

Answer 4

为我解决这个问题的方法是将我的 scss 文件的名称从更改style.scss为style.module.scss