使用您自己的样式来主题化 PrimeVue。
无样式一词用于定义一种替代的样式方法，而不是使用设计令牌的默认主题。PrimeVue 提供了两种使用您自己的 CSS 设置组件样式的方式：混合模式和纯模式。
在这两种选项中，都不包含设计令牌的 CSS 变量和利用它们的 CSS 规则集。主要区别在于，混合模式保留 DOM 中的选择器（如 p-select），而纯模式则不包含它们。无样式组件仍然需要在您这边进行样式设置，在接下来的部分中，我们将介绍两种模式的样式解决方案。
| 混合 | 纯 | |
|---|---|---|
| DOM 中的 p-* 选择器 | ||
| CSS 规则集 | ||
| CSS 变量 |
由于有大量的选项（例如样式化、纯粹和混合），因此选择哪种样式方法可能会令人困惑。我们制作了一个简短的视频，讨论了每种方法的优缺点。
总之，样式化模式是一个强大的 API，可以学习并为 Figma 提供一流的支持，因此，当与使用 PrimeVue Figma UI Kit 的 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 属性将特定组件用作无样式组件。
<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 提供基于 @apply 指令并支持 IntelliSense 的整个 PrimeVue UI 套件的 Tailwind CSS 版本。请访问 PrimeVue 的 Tailwind 版本，获取文档、演示和其他资源。