是的，您可以在react中以编程方式更改 ::before、::after 等伪元素的值。

这是一个技巧。

应用程序.js

const widthVar = 34;
const someStyle = {
     "--width": widthVar
}
<div className="something" style={someStyle}> </div>

样式文件

.something:before{
      width: var(--width),
      // remaining code
}

如https://stackoverflow.com/a/14141821/368697 中所述，伪元素不能使用内联样式设置样式。您必须something使用.something:before选择器在样式表中设置类名称的样式。这不是 React 的限制，而是 HTML + CSS 的设计选择。

如果你需要以编程方式改变伪:before元素的宽度，它可能更适合作为 React 渲染的常规 DOM 元素。

我从@am2505 那里得到了使用 CSS 变量的见解，因为它对我有帮助，但是，这种方式避免了内联样式。

HTML
<div className="something"> </div>

CSS

:root {
--width: <yourDefaultValue>
}

.something:before{
      width: var(--width),
}

JS

const changeWidth=() => {
    let root = document.querySelector(':root');
      root.style.setProperty('--width', '<yourNewValue>px');
   

在您希望宽度更改的事件中调用该函数。可以进一步修改 changeWidth 函数以使用条件语句动态处理状态。

@diehell，一个在 ReactJS 中为伪元素使用 <style> 组件的工作示例：

<style>
  {`.element::before {
    content: '';
    ...other CSS you want to use
  }`}
</style>