使用Webpack处理React项目。在style.css中添加一些样式,并使用导入组件import style from './style.css';。没有添加选择器的元素,例如body,,div可以很好地设置样式,但是我遇到了类问题。
import style from './style.css';
body
div
用设置className <div className='foo'>foo div</div>。
<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
foo
<div class="foo">foo div</div>
我已经尝试了一段时间,并尝试了很多事情…基本上可以设置所有DOM元素的样式,但是一旦我尝试添加任何选择器,我一无所获…
您的Webpack配置可能会更改类名称,具体取决于其设置。(已启用CSS模块,尽管您对样式表的评论完好无损,但事实并非如此)。
由于要导入“ ./style.css”文件,因此请尝试引用类名称:style.foo。例如:
<div className={ style.foo }>foo div</div>
本文:http : //javascriptplayground.com/blog/2016/07/css-modules-webpack- react/很好地描述了导入和引用类名称的模式。