在 React 中设置 CSS 个伪类的样式

Question

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

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

const color: '#fff';

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

<div style={ style }>

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

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

Answer 1

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

Answer 2

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

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

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

import style from './file.css'

在 React 中设置 CSS 个伪类的样式

Styling CSS pseudoclasses in React

html

css

pseudo-class

jsx

reactjs