无样式模式

使用您喜欢的 CSS 库为 PrimeReact 设置样式。

架构#

无样式模式包含两个解决方案。第一部分是从 DOM 中删除组件特定的样式类，当启用unstyled设置时，组件不包含任何 CSS 选择器，同时核心功能仍然可用。例如，在默认的样式模式下，下拉组件会将.p-dropdown样式类添加到根元素，并包含与该样式对应的 CSS。在无样式设置中，此样式类不会添加到根元素，并且 CSS 不会包含在页面中。

第二部分是自定义样式，因为组件在没有样式的情况下显示为透明。传递属性功能是关键，因为它还支持全局配置，以便在无样式模式下创建主题。实际上，即将推出的 Tailwind 主题基本上是一个自定义的pt配置。

设置#

通过在 PrimeReact 安装期间将unstyled设置为 true，可以为整个套件启用无样式模式。


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

或者，即使在默认样式模式下，仍然可以通过添加组件的unstyled属性来将特定组件用作无样式组件。


<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属性和全局设置会合并，其中组件具有更高的优先级。


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>
);