CSS 类名未应用于反应组件

Question

I appreciate your time and help. I spent hours trying to figure this out can't seem to get to the bottom of it.

I have this react component:

import styles from './style.scss';

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

and scss file:

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

When I load up my html, the div has no classname when I expect it to be <div class="bunny">

When I put the class name in the react component literally like this:

<div className="bunny"> 

then I can see the className in the browser.

What am I doing wrong?

Thank you so much in advance.

Answer 1

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

Answer 2

You need to import your scss like... import './styles.scss';

Webpack will take care of bundling your styles so you can add the className as a string on your component.

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

Answer 3

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

Answer 4

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