如何在React组件中使用CSS变量？行内样式设置content变量方法

你的代码里存在一个关键问题：直接在行内样式中写'--content': "Login"，最终渲染到DOM上的样式会是--content: Login;，而CSS的content属性要显示字符串必须用引号包裹，所以伪元素无法正确识别这个值。

正确写法 #

需要给变量值额外添加一层引号，让最终生成的CSS代码包含字符串引号。在React的行内样式对象中，用嵌套引号的方式实现即可：

return (
  <Button
    {...configButton}
    style={{ '--content': '"Login"' }}
  >
    <div className="left"></div>
         Login
    <div className="right"></div>
    {children}
  </Button>
);

（补充：React中元素的类名属性要用className而非原生HTML的class，上面代码已修正这个细节）

原理说明 #

这样设置后，DOM元素的行内样式会被解析为style="--content: \"Login\";"，你的CSS代码里的content: var(--content)就能正确读取到带引号的字符串，伪元素也就会显示出预期的文本内容。

内容的提问来源于stack exchange，提问作者Humail Saleem