Css类名未应用于反应组件 [英] Css classname not applied to react component

问题描述

感谢您的时间和帮助。我花了好几个小时试图弄清楚它似乎无法达到它的底部。

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

我有这个反应组件：

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>

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

当我把类名放在react组件中时字面上是这样的：

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

<div className="bunny"> 

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

then I can see the className in the browser.

我做错了什么？

提前多谢你。

推荐答案

首先，你需要保证它定义为： console.log（样式）
我不确定你是否正确导入style.scss 。

Firstly, you need to guarantee it's defined with: console.log(styles) Im' not sure you import style.scss correctly.

这篇关于Css类名未应用于反应组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！