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

Posted 2023-02-22

【中文标题】CSS 类选择器样式未在 React 项目中应用

【英文标题】：CSS class selector styles not being applied in React Project

【发布时间】：2017-12-01 01:50:25

【问题描述】：

使用 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 元素都可以设置样式，但是一旦我尝试添加任何类型的选择器，我什么都得不到...

【参考方案1】：

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

由于您正在导入“./style.css”文件，请尝试引用类名，例如：style.foo。例如：

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

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

【参考方案2】：

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

height: "100px"

不一样

height: 100px

【参考方案3】：

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

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

【参考方案4】：

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

style.css

到：

style.module.css