如何在 React-TypeScript 的内联 CSS 中使用 \"--percentage\"？答案

【问题标题】：How can I use "--percentage" in Inline CSS in React-TypeScript?如何在 React-TypeScript 的内联 CSS 中使用 \"--percentage\"？
【发布时间】：2022-12-05 18:05:50
【问题描述】：

我有一个内联样式的 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 & {}>'.

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

【问题讨论】：

标签： css reactjs typescript react-tsx

【解决方案1】：

将样式对象转换为React.CSSProperties

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

【讨论】：