安装

PrimeReact 是一组用于 React 的丰富的开源 UI 组件。

下载#

PrimeReact 可在 npm 下载。


// with npm
npm install primereact

// with yarn
yarn add primereact

上下文#

配置由从 primereact/api 导入的 PrimeReactProvider 和 PrimeReactContext 管理。


import { PrimeReactProvider, PrimeReactContext } from 'primereact/api';

PrimeReactProvider 组件用于包裹应用程序，而 PrimeReactContext 用于访问配置选项。


// _app.js
import { PrimeReactProvider } from 'primereact/api';

export default function MyApp({ Component, pageProps }) {
    return (
        <PrimeReactProvider>
            <Component {...pageProps} />
        </PrimeReactProvider>
    );
}

用法#

每个组件都可以单独导入，以便您只捆绑您使用的内容。导入路径可在相应组件的文档中找到。


import { Button } from 'primereact/button';

主题#

PrimeReact 有两种主题模式；样式化或无样式。

样式化模式#

样式化模式基于预先设计的组件，带有 Material、Bootstrap 或 PrimeOne 主题等预设主题。主题是要导入的必需 css 文件，请访问主题部分，查看可用的完整主题列表以供选择。


import "primereact/resources/themes/lara-light-cyan/theme.css";

无样式模式#

默认情况下，所有组件都禁用无样式模式。在安装过程中使用 PrimeReactContext，将 unstyled 设置为 true 以全局启用它。请访问无样式模式文档以获取更多信息和示例。


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

示例#

我们为 React 生态系统中流行的选项创建了各种示例。

视频#

视频教程将逐步引导您完成。

Next.js#

PrimeReact 对 SSR 和 Next.JS 提供一流的支持，事实上，本网站也是用 Next.js 构建的