无样式模式

使用您最喜欢的 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>
);