使用您喜欢的 CSS 库为 PrimeVue 设置样式。
无样式模式包含两种解决方案。第一部分是从 DOM 中删除组件特定的样式类，当启用 *无样式* 设置时，组件不包括任何 CSS 选择器，而核心功能仍然可用。例如，在默认的带样式模式下，select 组件会将 *。p-select* 样式类添加到根元素，并将 CSS 包含到相应的样式中。在无样式设置中，此样式类不会添加到根元素，并且 CSS 不会包含在页面中。
第二部分是自定义样式，因为组件以透明方式显示，没有它们的样式。 传递属性 功能是关键，因为它还支持全局配置以在无样式模式下创建主题。事实上，即将推出的 Tailwind 主题基本上是一个自定义 *pt* 配置。
通过在 PrimeVue 安装期间将 *无样式* 设置为 true，可以为整个套件启用无样式模式。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, { unstyled: true });
或者，即使在默认的带样式模式下，也可以通过添加组件的 *无样式* 道具来使用特定组件作为无样式组件。
<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, {
pt: {
button: {
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' }
icon: 'text-white text-2xl'
},
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 非常适合无样式模式，请访问专门的 Tailwind CSS 文档以了解一流的集成。