小编典典

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

reactjs

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

用设置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元素的样式,但是一旦我尝试添加任何选择器,我一无所获…


阅读 273

收藏
2020-07-22

共1个答案

小编典典

您的Webpack配置可能会更改类名称,具体取决于其设置。(已启用CSS模块,尽管您对样式表的评论完好无损,但事实并非如此)。

由于要导入“ ./style.css”文件,因此请尝试引用类名称:style.foo。例如:

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

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

2020-07-22