如何在 React-TypeScript 的 Inline CSS 中使用“--percentage”？

Question

我有一个内联样式的 div

<div className="HalfArc" style={{ "--percentage": "75%" }}>

这在我的 ReactJS 项目中运行良好。 它也适用于我的 ReactTS 项目，但我收到此 TS2322 错误：

Type '{ "--percentage": string; }' is not assignable to type 'Properties<string | number, string & {}>'.
  Object literal may only specify known properties, and '"--percentage"' does not exist in type 'Properties<string | number, string & {}>'.

我尝试在不同的 position 中设置“”，但我不知道如何消除错误。

Answer 1

将样式 object 转换为React.CSSProperties

const style = { "--percentage": "75%"} as React.CSSProperties;
<div className="HalfArc" style={style}>