Question

使用Webpack处理React项目。在style.css中添加一些样式并导入到import style from './style.css';的组件中。没有选择器的元素添加如body，div，样式很好，但我遇到了类的问题。

使用<div className='foo'>foo div</div>设置className。

css：

.foo {
  height: 250px;
  width: 250px;
  background-color: blue !important;
}

body {
  background-color: red;
}

红色背景颜色应用于正文，但.foo div没有任何结果......当我在DevTools中检出foo div时，它有其类名（<div class="foo">foo div</div>）和样式表完好无损：

.foo {
  height: 250px;
  width: 250px;
  background-color: blue !important;
}

body {
  background-color: red;
}

我一直试图弄清楚这一段时间，并尝试了很多东西......基本上所有的DOM元素都可以设置样式，但是一旦我尝试添加任何类型的选择器，我什么也得不到...... < / p>

Answer 1

您的webpack配置可能正在根据其设置更改类名。（启用了CSS模块，尽管你对样式表的评论完整意味着它不是）。

由于您要导入＆＃39; ./ style.css＆＃39;文件，尝试引用类名称：style.foo。例如：

<div className={ style.foo }>foo div</div>

Answer 2

如果您喜欢我并使用样式属性进行样式化，然后将它们移动到.css文件中的适当类中（并想知道它为什么不起作用），请记住删除JSX字符串格式，

height: "100px"

与

不同

height: 100px

Answer 3

虽然Kyle的答案有效，但更好的解决方案是将css文件重命名为style.global.css并使用import './style.global.css'导入，并指定类名，如普通的html。当您想在运行时追加不同的类名时，这种方法更有效

<div className='foo'>foo div</div>

Answer 4

我的解决方案是从以下位置重命名css文件：

style.css

至：

style.module.css