Reactjs可以以编程方式处理：before吗？

Question

不知何故，我必须以编程方式设置的宽度:before了div。

<div className="something" style={someStyle}> </div>

我如何定义someStyle，这样的宽度:before的.something``div可发生相应的变化？

Answer 1

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

这是一个技巧。

应用程序.js

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

样式文件

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

Answer 2

伪元素不能使用内联样式设置样式，如/sf/answers/989927501/中所述。您将必须something在样式表中使用.something:before选择器。这不是React的限制，而是HTML + CSS的设计选择。

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