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

IT技术 javascript css reactjs webpack
2021-05-17 16:15:39

使用 Webpack 处理 React 项目。在 style.css 中添加一些样式并导入到组件中import style from './style.css';没有添加选择器的元素,如body, 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 {
  height: 250px;
  width: 250px;
  background-color: blue !important;
}

body {
  background-color: red;
}

我一直在尝试解决这个问题并尝试了很多东西......基本上所有 DOM 元素都可以设置样式,但是一旦我尝试添加任何类型的选择器,我什么也得不到......

4个回答

您的 webpack 配置可能会根据其设置更改类名。(启用了 CSS module,尽管您对样式表完好无损的评论暗示它不是)。

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

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

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

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

height: "100px"

不一样

height: 100px

虽然 Kyle 的回答有效,但更好的解决方案是将 css 文件重命名为 style.global.css 并将其导入import './style.global.css'并指定类名,如普通 html。当您想在运行时附加不同的类名时,这更有效

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

我的解决方案是将 css 文件重命名为:

style.css

到:

style.module.css