自訂變體

NextUI 允許您為元件建立新的變體,以更符合專案的需求。這可以透過擴展元件及其屬性,並自訂樣式來完成。

您可以建立或覆寫元件的 variantsdefaultVariantscompoundVariants

注意:對於一次性的自訂設定,請參考覆寫樣式文件。

為非插槽組件建立新變體

按鈕組件是一個非插槽組件,這表示它沒有任何可以自訂的插槽。

在此範例中,我們將使用Button組件的樣式原始碼作為參考。請點擊這裡查看樣式原始碼。

注意:如果您不熟悉變體的概念,請參考Tailwind Variants文件。

擴展原始組件變體

要建立或覆寫變體,您需要使用extendVariants函式。此函式允許您根據原始組件建立新組件,並自訂其變體。

在您的應用程式中使用自訂組件

然後,您現在可以在您的應用程式中使用自訂組件。在此,MyButton 的顏色設定為 olive,大小設定為 xl

新的組件將包含Button組件的原始屬性,以及您建立的新變體。

為插槽組件建立新變體

也可以使用extendVariants函式,為具有插槽的組件新增或覆寫變體。

輸入組件是一個插槽組件,這表示它具有可以自訂的插槽。

在此範例中,我們將使用Input組件的樣式原始碼作為參考。請點擊這裡查看樣式原始碼。

注意:如果您不熟悉變體/插槽的概念,請參考Tailwind Variants文件。

擴展原始組件變體

要建立或覆寫變體,您需要使用extendVariants函式。此函式允許您根據原始組件建立新組件,並自訂其變體。

在您的應用程式中使用自訂組件

然後,您現在可以在您的應用程式中使用自訂組件。在此,MyInput 的顏色設定為 slate,大小設定為 xl

新的組件將包含輸入組件的原始屬性,以及您建立的新變體。

所有 NextUI 組件的頁面頂部都有 Styles source 連結。此連結會將您帶到組件的樣式原始碼。您可以在建立自己的自訂組件時以此作為參考。

類型

主要函式

選項

設定

注意:請參閱Tailwind Merge 設定,以了解更多資訊。