主题

从各种主题中选择，或轻松开发自己的主题。

架构#

注意：在不久的将来，样式模式的主题架构将重新设计为利用 CSS 变量而不是 SCSS 变量，以实现向后兼容的动态方法。

PrimeReact 是一个设计不可知的库，因此与其他 UI 库不同，它不强制执行特定的样式，例如 material 或 bootstrap。为了实现这一点，样式已分为两个部分：核心和主题。核心位于 PrimeReact 内部，以实现组件的结构（例如定位），而主题则带来颜色和间距。

Architecture

内置主题#

PrimeReact 附带了各种免费主题可供选择。下面的列表说明了 npm 发行版中所有可用的主题及其导入路径。要进行实时预览，请使用顶栏的配置器来切换主题。 在顶栏切换主题。


primereact/resources/themes/bootstrap4-light-blue/theme.css
primereact/resources/themes/bootstrap4-light-purple/theme.css
primereact/resources/themes/bootstrap4-dark-blue/theme.css
primereact/resources/themes/bootstrap4-dark-purple/theme.css
primereact/resources/themes/md-light-indigo/theme.css
primereact/resources/themes/md-light-deeppurple/theme.css
primereact/resources/themes/md-dark-indigo/theme.css
primereact/resources/themes/md-dark-deeppurple/theme.css
primereact/resources/themes/mdc-light-indigo/theme.css
primereact/resources/themes/mdc-light-deeppurple/theme.css
primereact/resources/themes/mdc-dark-indigo/theme.css
primereact/resources/themes/mdc-dark-deeppurple/theme.css
primereact/resources/themes/tailwind-light/theme.css
primereact/resources/themes/fluent-light/theme.css
primereact/resources/themes/lara-light-blue/theme.css
primereact/resources/themes/lara-light-indigo/theme.css
primereact/resources/themes/lara-light-purple/theme.css
primereact/resources/themes/lara-light-teal/theme.css
primereact/resources/themes/lara-dark-blue/theme.css
primereact/resources/themes/lara-dark-indigo/theme.css
primereact/resources/themes/lara-dark-purple/theme.css
primereact/resources/themes/lara-dark-teal/theme.css
primereact/resources/themes/soho-light/theme.css
primereact/resources/themes/soho-dark/theme.css
primereact/resources/themes/viva-light/theme.css
primereact/resources/themes/viva-dark/theme.css
primereact/resources/themes/mira/theme.css
primereact/resources/themes/nano/theme.css
primereact/resources/themes/saga-blue/theme.css
primereact/resources/themes/saga-green/theme.css
primereact/resources/themes/saga-orange/theme.css
primereact/resources/themes/saga-purple/theme.css
primereact/resources/themes/vela-blue/theme.css
primereact/resources/themes/vela-green/theme.css
primereact/resources/themes/vela-orange/theme.css
primereact/resources/themes/vela-purple/theme.css
primereact/resources/themes/arya-blue/theme.css
primereact/resources/themes/arya-green/theme.css
primereact/resources/themes/arya-orange/theme.css
primereact/resources/themes/arya-purple/theme.css
         

切换主题#

以下解决方案有效，但仍有改进空间。即将推出的样式 API 将大大提高动态主题切换能力，并通过引入 CSS 变量和动态导入来消除先决条件。

可以使用 PrimeReactContext 中的 changeTheme 函数动态更改主题。为了使此功能正常工作，有两个先决条件。首先，主题应通过从 PrimeReact 的 resources/themes 文件夹中复制它们，在项目的 public 文件夹下公开可用。第二部分是通过 link 元素使 theme.css 可访问，以便可以将 link 的 id 作为第三个参数提供给 changeTheme 函数。 public文件夹中提供。第二部分是使 theme.css 可以通过链接元素访问，以便可以将链接的 id 作为第三个参数提供给 changeTheme 函数。


import { PrimeReactContext } from 'primereact/api';

//Use in a component
const { changeTheme } = useContext(PrimeReactContext);

changeTheme(currentTheme: string, newTheme: string, linkElementId: string, callback: Function)
         

如果您可以直接访问 index.html，则可以将链接放置在 head 部分。


<link id="theme-link" rel="stylesheet" href="/themes/lara-light-blue/theme.css">
         

Next.js 应用程序可以使用 next/head 组件或自定义配置链接元素。 文档.


<Head>
    <link id="theme-link" rel="stylesheet" href="/themes/lara-light-blue/theme.css">
</Head>
         

自定义主题#

主题是使用 github 上提供的 primereact-sass-theme 项目用 SASS 创建的。此存储库包含组件的所有 scss 文件和内置主题的变量，以便您可以自定义现有主题或创建自己的主题。主题中使用的 scss 变量可在 SASS API 文档中找到。

有两种替代方法来创建自己的主题。第一种选择是使用命令行 sass 编译主题，最后一种选择是将 scss 文件嵌入到您的项目中，让您的构建环境进行编译。在所有情况下，都应将生成的主题文件导入到您的项目中。我们创建了一个视频教程，演示了所有三种选择。

主题 SCSS

主题 scss 在 primereact-sass-theme 存储库中以开源形式提供。theme-base 文件夹包含组件的主题结构，themes 文件夹下的主题导入基础并定义 SCSS 变量。themes 文件夹还包含所有内置主题，因此您也可以自定义它们的代码。

要创建自己的主题，请下载 与您的 PrimeReact 版本匹配的版本，并访问 themes/mytheme 文件夹。要自定义的 sass 变量可在 variables 文件夹下找到。_fonts 文件可用于为您的项目定义自定义字体，而可选的 _extensions 文件则用于为组件设计添加覆盖。theme.scss 文件导入主题文件以及根目录下的 theme-base 文件夹，以将所有内容组合在一起。下一步将是 scss 的编译，这可以是命令行或在您的项目内进行。

手动编译 SCSS

主题准备就绪后，运行以下命令进行编译。请注意，sass 命令应在您的终端中可用。


sass --update themes/mytheme/theme.scss:themes/mytheme/theme.css
         

然后，复制主题 css 文件并将其导入您的应用程序。例如，在 Next.js 中，理想的位置可能是 _app.js。


import './assets/theme.css';
         

构建时编译

此方法通过将其委托给具有编译 SCSS 能力的构建环境来消除手动编译。将 theme-base 文件夹和 themes/mytheme 文件夹复制到您的应用程序中，资产所在的位置。在合适的入口点（如 _app.js 或 index.js）中，从 assets/themes/mytheme 导入 theme.scss。就是这样，在构建时，您的项目将编译 sass 并导入主题。对主题的任何更改都将立即反映出来。

作用域样式#

设计器主题将全局外观应用于库，如果您需要更改特定组件的样式，可以使用命名类、CSS 模块或 CSS-in-JS 解决方案（如 styled-jsx）。以下视频教程介绍了以下替代方案。

命名类#

命名类绑定到组件的 className 属性，并且 CSS 与导入一起包含。请注意，css 仍然是全局捆绑的，因此如果您的应用程序没有内置的解决方案来执行 CSS 范围划分，请首选此方法。

命名类名

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


/* .custompanel.css */
.mypanel .p-panel-header {
    background-color: #07c4e8;
    color: #ffffff;
}
         

import React from 'react';
import { Panel } from 'primereact/panel';
import './custompanel.css';

export default function PanelDemo() {
    return (
        <Panel header="Named ClassName" className="mypanel">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </Panel>
    )
}
         

CSS 模块#

CSS 模块允许将 css 文件导入到您的 react 组件中，并使用变量引用其中的类。要提供应用于外部组件的级联类，请使用 :global 选择器（检查 CSS 模块文档）。NextJS 内置了对 CSS 模块的支持，允许将带有 .module.css 后缀的 css 文件解释为模块。

CSS 模块

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


/* paneldemo.module.css */
.mypanel :global(.p-panel-header) {
    background-color: #07c4e8;
    color: #ffffff;
}
         

import React from 'react';
import { Panel } from 'primereact/panel';
import panelDemoModule from './paneldemo.module.css';

export default function PanelDemo() {
    return (
        <Panel header="CSS Module" className={panelDemoModule.mypanel}>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </Panel>
    )
}
         

JS 中的 CSS#

CSS-in-JS 解决方案也很流行，用于实现作用域 CSS。 例如，我们将使用 styled-jsx 来定制我们的面板。 请注意，使用 :global 并不会使样式全局化，而只是从内部元素中删除命名空间，因为它足以限定主容器元素的作用域，在本例中为 .p-panel。

样式化组件

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


import React from 'react';
import { Panel } from 'primereact/panel';
import css from 'styled-jsx/css';

export default function PanelDemo() {
    const {className, styles} = css.resolve`
        .p-panel > :global(.p-panel-header) {
            background-color: #54b5a6;
            color: #ffffff;
        }
    `;

    return (
        <>
            <style jsx>{styles}</style>
            <Panel header="CSS Module" className={className}>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </Panel>
        </>
    )
}
         

缩放#

PrimeReact 使用 rem 单位来确保组件与您其余的 UI 完美融合。 这也支持缩放，例如，更改组件的大小就像配置文档的字体大小一样简单。 以下代码根据 16px 设置组件的缩放比例。 如果您需要更大或更小的组件，只需更改此变量，组件将相应缩放。


html {
    font-size: 14px;
}
         

PrimeFlex#

PrimeFlex 是一个轻量级的响应式 CSS 实用程序库，用于配合 Prime UI 库和静态网页。 PrimeReact 可以与任何 CSS 实用程序库（如 bootstrap 和 tailwind）一起使用，但 PrimeFlex 具有一些优势，例如与使用 CSS 变量的 PrimeReact 主题集成，以便颜色类（例如 bg-blue-500）接收所使用 PrimeReact 主题的颜色代码。 PrimeReact 遵循 PrimeFlex 的 CSS 实用程序方法，目前不提供像 sx 这样的扩展样式属性。 同样的方法也用于 PrimeBlocks for PrimeReact 项目中。

以下示例演示如何在较大屏幕上水平对齐 3 个按钮，并在较小屏幕上将它们堆叠显示。


<div className="flex flex-column md:flex-row justify-content-between my-5">
    <Button type="button" label="Button 1" className="mb-3 md:mb-0"></Button>
    <Button type="button" label="Button 2" className="p-button-secondary mb-3 md:mb-0"></Button>
    <Button type="button" label="Button 3" className="p-button-help"></Button>
</div>
         

实用工具#

除了 PrimeFlex 之外，PrimeReact 本身也有一些 css 实用程序类。

名称描述
p-component将组件主题（例如字体系列和字体大小）应用于元素。
p-fluid将 100% 宽度应用于所有后代组件。
p-disabled应用不透明度以显示为禁用。
p-hidden-accessible元素在视觉上变为隐藏，但仍然可以使用辅助功能。
p-reset重置浏览器的默认值。
p-link将按钮呈现为链接。
p-error指示错误文本。
p-invalid将无效样式应用于文本或表单字段。
p-text-secondary应用具有辅助优先级的文本颜色主题。

CSS 变量#

每个 PrimeReact 主题都会导出大量的 CSS 变量，有关更多详细信息，请参阅颜色页面。

                        PrimeReact 10.9.1 由 PrimeTek