Question

我需要将一些CSS规则应用于::before和::after，但我无法弄清楚如何。

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

const color: '#fff';

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

<div style={ style }>

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

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

Answer 1

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

Answer 2

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

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

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

import style from './file.css'

在React中设置CSS伪类的样式

2 个答案: