在 React 中设置 CSS 伪类的样式答案

【问题标题】：Styling CSS pseudoclasses in React [duplicate]在 React 中设置 CSS 伪类的样式
【发布时间】：2018-07-06 02:25:30
【问题描述】：

我需要对 ::before 和 ::after 应用一些 CSS 规则，但我不知道如何。

我尝试像这样（使用 JSX）将 内联样式 传递给我的组件：

const color: '#fff';

const style = {
  '::before': { backgroundColor: color },
  '::after': { backgroundColor: color },
};

<div style={ style }>

我也尝试了其他排列方式，例如 ':before'、'&::before'、before... 似乎没有任何效果。

这甚至被 React 支持吗？如果是这样，使用内联样式的正确方法是什么？

【问题讨论】：

标签： html css reactjs jsx pseudo-class

【解决方案1】：

react 的内联样式不支持 css 伪类。或媒体查询。您可以编写纯 css，也可以为 https://github.com/styled-components/styled-components 使用 lib

【讨论】：

【解决方案2】：

您可以将样式加载器添加到您的 webpack 配置中。

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

当您在组件中导入任何 css 时，这会通过注入样式标签将 CSS 添加到 DOM。

import style from './file.css'

【讨论】：