能否在JSX标签中直接使用CSS定义的--color-accent自定义颜色变量？

当然可以直接调用你在CSS里定义的自定义颜色变量，这里给你两种实用的实现方式：

• 直接使用CSS var()函数（最简便）
  你只需要把JSX style属性里的十六进制值替换成var(--color-accent)即可，代码修改后如下：

  <h1> This is a word in <span style={{color: 'var(--color-accent)'}}> Orange </span></h1>
  

  这样就能直接引用:root中定义的全局颜色变量，效果和你之前用十六进制值完全一致。

• CSS Modules 方式（适用于模块化CSS场景）
  如果你的项目采用了CSS Modules方案，可以先在JSX文件中导入对应的CSS模块，再通过模块对象访问变量。不过这种方式需要在CSS文件中额外导出变量（具体写法依赖工具链），对于全局:root变量来说，第一种方法更直接高效。

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