javascript - Css 类名不适用于 React 组件

Question

感谢您的宝贵时间和帮助。我花了几个小时试图解决这个问题，但似乎无法追根究底。

我有这个 react 组件:

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

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

我做错了什么？

非常感谢您。

Answer 1

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