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

Question

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

用class设置className <div className='foo'>foo div</div>.

CSS:

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

body {
  background-color: red;
}

红色背景颜色应用于正文,但.foodiv得不到任何东西......当我foo在DevTools中检出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模块,但您对样式表的完整评论意味着它不是).

由于您要导入'./style.css'文件,请尝试引用类名称:style.foo.例如:

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

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

Answer 2

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

height: "100px"

不一样

height: 100px