Reactjs 可以以编程方式处理 :before 吗？答案

【问题标题】：Can Reactjs programmatically handle :before?Reactjs 可以以编程方式处理 :before 吗？
【发布时间】：2014-11-22 02:35:03
【问题描述】：

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

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

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

【问题讨论】：

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

标签： css less reactjs

【解决方案1】：

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

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

【讨论】：

感谢您的建议
@haohcraft，你有在 reactjs 中使用 :before, :after, + 的例子吗？

【解决方案2】：

@diehell，一个在 ReactJS 中将

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

【讨论】：

【解决方案3】：

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

这是一个技巧。

app.js

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

style.css

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

【讨论】：

这个其实还不错。正在找，谢谢。
@uhetz 我很高兴你喜欢这个解决方案。昨天我也在想任何解决方案，但没有一个对我有用。
如果您使用的是 Typescript，则需要在访问变量之前从 React 扩展 CSSProperties 类型以使其工作。见stackoverflow.com/a/65959390/868724

【解决方案4】：

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

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

CSS

:root {
--width: <yourDefaultValue>
}

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

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

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

【讨论】：