使用 WindiCSS 的 Attributify Mode 时，JSX 提示属性不存在

问题

使用 WindiCSS 或者 UnoCSS 的 Attributify Mode，并配合 React、SolidJS 等使用 JSX 语法的框架时，

VSCode 会提示 类型“ButtonHTMLAttributes<HTMLButtonElement>”上不存在属性“border”。ts(2322) 之类的错误。

原因

Attributify Mode 需要在 HTML 元素上添加自定义属性，而不是用 className，

但是默认的 HTMLAttributes 类型不包含这些属性，因此需要手动打一个类型补丁。

解决

在项目根目录下的 index.d.ts 文件中添加下面的语句，这里以 SolidJS 为例，React 同理。

interface 不需要 extends 原来的，因为 TypeScript 会自动合并相同的 interface。

declare module 'solid-js' {
  namespace JSX {
    interface HTMLAttributes<T> {
      bg?: string
      text?: string
      font?: string
      p?: string
      m?: string
      border?: string
    }
  }
}

export {}

这里只列出了部分属性，全部支持的属性可以看查 这个文章 。

参考资料

• https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces