React内联样式中如何使用CSS变量并进行calc计算？

你的写法有两个问题导致transform不生效：

• calc内部运算符前后缺少空格，浏览器无法正确解析表达式
• CSS变量--value是纯数字，和无单位的100相加后，无法直接作为百分比传递给scaleX

正确写法有两种： #

方法一：在calc中转换单位

保持--value为纯数字，在calc里把变量转换成百分比后再计算，同时注意运算符前后加空格：

transform: `scaleX(calc(100% + var(--value) * 1%))`

方法二：直接定义带单位的CSS变量

把--value定义为百分比格式，这样calc可以直接进行运算：

// 外层div的样式
"--value": `${val}%`

// 内层div的transform
transform: `scaleX(calc(100% + var(--value)))`

修改后的完整代码示例（方法一）： #

export default function App() {
  const [val, setVal] = React.useState<number>(3);
  return (
    <div style={{
      position: "relative",
    }}>
      <h1>使用CSS变量</h1>
      <input 
        id="val" 
        name="val" 
        step={10}
        value={val} 
        onChange={e => setVal(Number(e.target.value))} 
        type="number" />
      <div style={{
        display: "flex",
        "--value": val
      } as React.CSSProperties}>
        <div style={{
          display: "block",
          margin: "3rem 6rem",
          position: "absolute",
          left: 0,
          width: "50px",
          height: "50px",
          transform: `scaleX(calc(100% + var(--value) * 1%))`,
          backgroundColor: "red",
        }} ></div>
      </div>
    </div>
  );
}

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