在 React 中设置 CSS 伪类的样式

Posted 2023-02-21

【中文标题】在 React 中设置 CSS 伪类的样式

【英文标题】：Styling CSS pseudoclasses in React [duplicate]

【发布时间】：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 支持吗？如果是这样，使用内联样式的正确方法是什么？

【参考方案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'