CSS类选择器样式未应用于React Project

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;
}

红色背景颜色被应用于身体，但是.foodiv一无所获...当我在DevTools中查看foo Div时，它具有其类名称(<div class="foo">foo div</div>(，样式表完整是完整的：

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

我一直试图弄清楚这一点，并尝试了很多事情...基本上所有的dom元素都可以使用，但是一旦我尝试添加任何类型的选择器，我就一无所获...

Answer 1

您的WebPack配置可能会根据其设置更改类名。(启用了CSS模块，尽管您对StyleSheet完整的评论意味着不是(。

由于您正在导入'./style.css'文件，因此请尝试引用类名称为：style.foo。例如：

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

本文：http：//javascriptplayground.com/blog/2016/07/css-modules-webpack-react/描述了导入和引用类名的模式。

Answer 2

如果您像我一样并使用样式属性进行样式，然后将它们移至.css文件中的适当类(并且想知道为什么它不起作用(，请记住要删除删除JSX字符串格式，

height: "100px"

与

不同

height: 100px

Answer 3

虽然凯尔的答案有效时，一个更好的解决方案是将CSS文件重命名为style.global.css并使用import './style.global.css'导入，并指定类似于普通HTML的类名。当您想在运行时间附加不同的类名称

时，这可以更好地工作。

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

Answer 4

我的解决方案是从：

重命名CSS文件。

style.css

to：

style.module.css