Css类名未应用于反应组件

时间:2018-02-07 23:51:46

标签: javascript css reactjs webpack react-boilerplate

感谢您的时间和帮助。我花了好几个小时试图解决这个问题似乎无法深究它。

我有这个反应组件:

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">时没有类名

当我将类名放在react组件中时,就像这样:

<div className="bunny"> 

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

我做错了什么?

提前非常感谢你。

4 个答案:

答案 0 :(得分:2)

首先,您需要保证其定义为:console.log(styles) 林&#39;不确定是否正确导入style.scss。

答案 1 :(得分:0)

您需要像这样导入您的scss ... import './styles.scss';

Webpack将照顾您的样式,以便您可以将className作为字符串添加到组件中。

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

对我来说这是因为我使用 commonjs 的 require 来加载 es 模块。