React-TypeScript中如何在内联CSS中使用"--percentage"变量？

问题核心是TypeScript默认的React.CSSProperties类型未包含自定义CSS变量（--开头的属性）定义，因此会抛出类型不匹配错误，尽管代码运行逻辑正常。以下是几种可行的解决方法：

1. 局部类型断言（快速解决单处场景） #

直接将样式对象断言为React.CSSProperties，明确告诉TypeScript该对象符合CSS属性类型：

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

若需临时兼容多变量场景，也可断言为any（不推荐，会丢失类型检查）：

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

2. 全局扩展CSSProperties类型（适合多处使用场景） #

在项目全局类型声明文件（如src/global.d.ts）中扩展React的CSSProperties接口，添加自定义变量的类型定义，整个项目使用该变量时都不会报错：

declare module 'react' {
  interface CSSProperties {
    '--percentage'?: string | number;
  }
}

若有多个自定义变量，可继续在接口中追加：

declare module 'react' {
  interface CSSProperties {
    '--percentage'?: string | number;
    '--another-custom-var'?: string;
  }
}

注意：确保tsconfig.json的include数组包含该声明文件，比如配置"include": ["src/**/*.d.ts"]。

3. 改用外部样式表（替代方案） #

若不想在TS中处理类型问题，可将自定义变量移到外部CSS文件，通过动态类名控制变量值：
CSS文件示例：

.HalfArc {
  /* 默认值 */
  --percentage: 50%;
}
.HalfArc--75 {
  --percentage: 75%;
}

组件中使用：

<div className={`HalfArc HalfArc--75`}>

这种方式更符合CSS最佳实践，同时规避TS类型校验问题。

内容的提问来源于stack exchange，提问作者Cinc-B