自訂變體
NextUI 允許您為元件建立新的變體,以更符合專案的需求。這可以透過擴展元件及其屬性,並自訂樣式來完成。
您可以建立或覆寫元件的 variants
、defaultVariants
和 compoundVariants
。
注意:對於一次性的自訂設定,請參考覆寫樣式文件。
為非插槽組件建立新變體
按鈕組件是一個非插槽組件,這表示它沒有任何可以自訂的插槽。
在此範例中,我們將使用Button
組件的樣式原始碼作為參考。請點擊這裡查看樣式原始碼。
注意:如果您不熟悉變體的概念,請參考Tailwind Variants文件。
擴展原始組件變體
要建立或覆寫變體,您需要使用extendVariants
函式。此函式允許您根據原始組件建立新組件,並自訂其變體。
在您的應用程式中使用自訂組件
然後,您現在可以在您的應用程式中使用自訂組件。在此,MyButton
的顏色設定為 olive
,大小設定為 xl
。
新的組件將包含Button
組件的原始屬性,以及您建立的新變體。
為插槽組件建立新變體
也可以使用extendVariants
函式,為具有插槽的組件新增或覆寫變體。
輸入組件是一個插槽組件,這表示它具有可以自訂的插槽。
在此範例中,我們將使用Input
組件的樣式原始碼作為參考。請點擊這裡查看樣式原始碼。
注意:如果您不熟悉變體/插槽的概念,請參考Tailwind Variants文件。
擴展原始組件變體
要建立或覆寫變體,您需要使用extendVariants
函式。此函式允許您根據原始組件建立新組件,並自訂其變體。
在您的應用程式中使用自訂組件
然後,您現在可以在您的應用程式中使用自訂組件。在此,MyInput
的顏色設定為 slate
,大小設定為 xl
。
新的組件將包含輸入組件的原始屬性,以及您建立的新變體。
所有 NextUI 組件的頁面頂部都有
Styles source
連結。此連結會將您帶到組件的樣式原始碼。您可以在建立自己的自訂組件時以此作為參考。
類型
主要函式
選項
設定
注意:請參閱Tailwind Merge 設定,以了解更多資訊。