React中如何将JSX变量传递到纯CSS文件中使用？

你的代码有两处语法错误直接导致报错：

• JSX语法不支持直接用class属性声明类名：class是JavaScript保留关键字，React要求所有元素的类名绑定必须用className属性替代，直接写class会被React判定为非法属性，不仅类名不会生效，还会抛出控制台错误。
• 内联样式对象的键名写法不符合JS语法规则：CSS自定义属性名以--开头、包含横杠，不属于合法的JS标识符，直接写--my-custom: color会被JS引擎识别为连续的减法运算，直接触发语法解析错误。这类带特殊字符的对象键必须用单/双引号包裹为字符串格式才能正常识别。

另外你的CSS逻辑有个小瑕疵：hover状态下同时把background-color和color（文字颜色）设为同一个变量值，会导致文字和背景完全同色，按钮文字看不见，建议根据实际需求调整文字颜色为和背景对比度足够的值。

JSX文件 #

import React from "react";
import "./styles/MyButton.css";

const MyButton = ({ title, handelClick, color }) => {
  
  return (
    <div className="parentbutton">
      <a 
        className="mybutton" 
        onClick={handelClick}
        style={{ '--my-custom': color }}
      >
        <span>{title}</span>
        <i></i>
      </a>
    </div>
  );
};

export default MyButton;

说明：这里把onClick的外层箭头函数去掉了，如果你不需要给handelClick传额外参数，直接绑定函数引用即可，能避免每次渲染生成新的函数实例。如果需要传参再保留箭头函数包裹的写法即可。

MyButton.css #

CSS本身读取变量的写法是完全正确的，仅调整下文字颜色避免同色即可（可根据你的设计需求灵活修改）：

a.mybutton:hover {
  letter-spacing: 0.25em;
  background-color: var(--my-custom);
  box-shadow: 0 0 2.5em var(--my-custom);
  color: #fff; /* 改成和自定义背景色对比度足够的文字色，避免文字和背景同色看不见 */
}

这种从JSX向纯CSS传值的方案是原生支持的：你在元素内联style上定义的CSS自定义属性，作用域就是当前元素本身，该元素的所有伪类、后代元素都可以通过var()正常读取变量值，不需要额外引入CSS-in-JS库或者其他配置，只要修正JSX语法错误就能正常运行，React 16及以上版本全兼容该写法。

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