無樣式模式

使用您喜愛的 CSS 函式庫設定 PrimeReact 的樣式。

架構#

無樣式模式包含兩個解決方案。第一部分是從 DOM 中移除元件特定的樣式類別，當啟用unstyled設定時，元件不包含任何 CSS 選擇器，但核心功能仍然可用。例如，在預設樣式模式中，下拉式選單元件會在根元素中新增 .p-dropdown 樣式類別，並包含對應樣式的 CSS。在無樣式設定中，此樣式類別不會新增至根元素，且 CSS 不會包含在頁面中。

第二部分是自訂樣式，因為元件在沒有樣式的情況下會顯示為透明。傳遞 Props 功能是關鍵，因為它也支援全域設定，以便在無樣式模式中建立主題。事實上，即將推出的 Tailwind 主題基本上是自訂的 pt 設定。

設定#

透過在 PrimeReact 安裝期間將 unstyled 設定為 true，即可為整個套件啟用無樣式模式。


import { PrimeReactProvider } from "primereact/api";
...
return(
    <PrimeReactProvider value={{ unstyled: true }}>
        <App />
    </PrimeReactProvider>
)

或者，即使在預設樣式模式下，仍可透過新增元件的 unstyled prop，將特定元件用作無樣式元件。


<Button label="Check" icon="pi pi-check" unstyled></Button>

範例#

以下是使用 PrimeFlex CSS 函式庫提供樣式的範例。在開始之前，請前往傳遞區段中的按鈕文件，以深入了解元件的內部結構。我們將使用 root、label 和 icon 元素來新增自訂樣式。


<Button label="Submit" icon="pi pi-check" unstyled
    pt={{
        root: { className: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
        label: { className: 'text-white font-bold text-xl' },
        icon: 'text-white text-2xl' // OR { className: 'text-white text-2xl' }
    }}
/>

主題#

無樣式主題基本上是全域的 pt 設定，因此它可以僅從單一位置定義一次，但特定元件仍然可以覆寫全域設定，因為元件的 pt props 和全域設定會與具有較高優先權的元件合併。


import { PrimeReactProvider } from "primereact/api";
...
return(
    <PrimeReactProvider
        value={{
            pt: {
                button: {
                    root: { className: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
                    label: 'text-white font-bold text-xl', // OR { className: 'text-white font-bold text-xl' }
                    icon: 'text-white text-2xl'
                },
                panel: {
                    header: 'bg-primary border-primary',
                    content: 'border-primary text-lg text-primary-700',
                    title: 'bg-primary text-xl',
                    toggler: 'bg-primary hover:bg-primary-reverse'
                }
            }
        }}
    >
        <App />
    </PrimeReactProvider>
);