如何通过var从jsx到纯css文件在react js?

Question

我想把var form父组件传递给子组件(——my-custom)，它会为子组件设置颜色，但是当我这样写时，它会给我错误，如果你看到我在MyButton.css中使用我的自定义变量，它会以这种方式调整我的按钮到我想要的任何颜色。

//my JSX file

import React from "react";
import "./styles/MyButton.css";
const MyButton = ({ title, handelClick, color }) => {

return (
<div class="parentbutton">
<a class="mybutton" onClick={() => handelClick()} style={{ --my-custom: color }}>
<span>{title}</span>
<i></i>
</a>
</div>
);
};
export default MyButton;

//MyButton.css

a.mybutton:hover {
letter-spacing: 0.25em;
background-color: var(--my-custom);
box-shadow: 0 0 2.5em var(--my-custom);
color: var(--my-custom);
}

Answer 1

你可以像这样替换你的样式，它可能会工作!

<div style={{ "--my-css-var": 10 } as React.CSSProperties} />

Answer 2

只使用inline styling而不使用.css文件

import React from "react";
const MyButton = ({ title, handelClick, color }) => {
return (
<div className="parentbutton">
<a className="mybutton" onClick={() => handelClick()} style={{
backgroundColor: color,
boxShadow: `0 0 2.5em ${color}`,
color: color
}}>
<span>{title}</span>
<i></i>
</a>
</div >
);
};
export default MyButton;