css - Reactjs 能否以编程方式处理 :before?

Question

我以某种方式必须以编程方式为 div 设置 :before 的宽度。

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

如何定义 someStyle 以便 .something``div 的 :before 的宽度可以相应地改变？

Answer 1

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

这是一个技巧。

应用程序.js

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

样式.css

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