使用您自己的樣式來設定 PrimeVue 的主題。
無樣式 這個詞用於定義一種替代的樣式方法，而不是使用設計符號的預設主題。PrimeVue 提供兩種選項來使用您自己的 CSS 設定元件的樣式：混合模式和純模式。
在這兩個選項中，都不包含設計符號的 CSS 變數以及使用這些變數的 CSS 規則集。主要差異在於，混合模式會在 DOM 中保留諸如 p-select 之類的選擇器，而純模式則不包含。無樣式元件仍然需要在您這邊設定樣式，在接下來的章節中，我們將涵蓋這兩種模式的樣式解決方案。
| 混合 | 純 | |
|---|---|---|
| DOM 中的 p-* 選擇器 | ||
| CSS 規則集 | ||
| CSS 變數 |
由於有諸如「樣式化」、「純」和「混合」等眾多選項，因此可能很難決定選擇哪種樣式方法。我們製作了一段簡短的影片，討論每種方法的優缺點。
總之，樣式化模式是一個功能強大的 API，可以學習，並具有對 Figma 的一流支援，因此，當與使用 PrimeVue Figma UI 工具組的 UI 設計師合作時，開發流程將會非常高效。當您不喜歡學習預設的主題 API、想要完全控制樣式或需要 Tailwind CSS 作為應用程式中唯一的樣式設定庫時，無樣式模式會很有益。無樣式模式的缺點是需要在應用程式中維護樣式。
在 PrimeVue 安裝期間啟用 unstyled 選項即可為整個套件啟用純模式。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { unstyled: true });
或者，即使在預設的樣式化模式下，仍然可以使用元件的 unstyled prop 將特定元件當作無樣式元件使用。
<Button label="Check" icon="pi pi-check" unstyled></Button>
這是一個使用 傳遞 屬性以 Tailwind CSS 設定按鈕元件樣式的範例。在開始之前，請前往 按鈕 文件中的傳遞章節，以進一步了解元件的內部結構。我們將使用 root、label 和 icon 元素來新增自訂樣式。
<Button
label="Search"
icon="pi pi-search"
unstyled
pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
pt:label="text-white font-bold text-lg"
pt:icon="text-white text-xl"
/>
可以在應用程式層級建立全域配置，以避免透過全域 pt 選項重複操作，以便可以從單一位置共用樣式。特定元件仍然可以使用其自身的 pt 屬性來覆寫全域配置。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
unstyled: true,
pt: {
button: {
root: 'bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2',
label: 'text-white font-bold text-lg',
icon: 'text-white text-xl'
},
panel: {
header: 'bg-primary text-primary-contrast border-primary',
content: 'border-primary text-lg text-primary-700',
title: 'bg-primary text-primary-contrast text-xl',
toggler: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
}
}
});
Tailwind CSS 非常適合純模式，我們的團隊已開始實作全域 pt 配置的參考實作，以設定整個 UI 套件的樣式，稱為 Tailwind CSS 預設。這個附加專案目前正在尋找社群貢獻者來接管所有權，因為 PrimeTek 需要大量的頻寬才能透過傳遞來維護樣式化模式和無樣式模式預設。
透過將 theme 選項設定為 none，即可為整個套件啟用混合模式。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { theme: 'none' });
在混合模式下，不包含預設的 CSS 規則和變數，但是 CSS 選擇器會保留在 DOM 中，以便您可以使用它們來建立自己的規則。
.p-button {
background: #a855f7;
border: 0 none !important;
color: white;
padding: 0.5rem 0.75rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 24px;
}
.p-button:enabled:hover {
background: #a855f7;
}
.p-button:enabled:active {
background: #9333ea;
}
PrimeTek 提供整個 PrimeVue UI 套件的 Tailwind CSS 版本，該版本基於具有 IntelliSense 支援的 @apply 指令。請造訪 Tailwind 版本的 PrimeVue，以取得文件、範例和其他資源。