在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是否支持此功能？如果是，那么使用内联样式应该怎么做才是正确的方式呢？

- Simone

Answer 1

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

- Herman Starikov

Answer 2

您可以将 style-loader 添加到您的 webpack 配置中。

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

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

import style from './file.css'

- Shrey Kejriwal