styled-components动态赋值pointerEvents报TS2769错误怎么解决

你给pointerEvents动态赋值时使用了模板字符串语法，TypeScript会将模板字符串的返回值类型推断为宽泛的string类型；但React+TypeScript对CSS属性pointerEvents有严格的类型校验，只允许传入报错信息中列出的特定字面量联合类型（"none" | "all" | "auto" | "inherit"等固定合法值），不接受任意普通字符串。
当你写固定值style={{ pointerEvents: 'none' }}时，TS能直接识别到这是符合约束的字面量值，所以不会报错；套了模板字符串之后值的类型被拓宽为通用string，就触发了类型不匹配的TS2769错误。

选择任意一种即可：

• 方案1（最简洁推荐）：去掉无意义的模板字符串，直接通过三元表达式返回符合类型要求的字面量值

<A
  href={link || undefined}
  style={{ pointerEvents: disabled ? 'none' : 'all' }}
>

• 方案2：如果需要保留模板字符串写法，添加as const类型断言，把返回值收窄为字面量类型

<A
  href={link || undefined}
  style={{ pointerEvents: `${disabled ? 'none' : 'all'}` as const }}
>

• 方案3：显式声明值的类型为CSS属性对应的合法类型，写法相对冗余不推荐

const pointerEventsValue: React.CSSProperties['pointerEvents'] = disabled ? 'none' : 'all'
<A
  href={link || undefined}
  style={{ pointerEvents: pointerEventsValue }}
>

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