使用 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