React + NextUI 安装

安装

在 React 项目目录中，通过运行以下任一命令安装 NextUI：

yarn add @nextui-org/react
# or
npm i @nextui-org/react

设置

为了让 NextUI 正常工作，您需要NextUIProvider在应用程序的根目录下设置。

React

转到应用程序的根目录并执行以下操作：

import * as React from 'react';

// 1. import `NextUIProvider` component
import { NextUIProvider } from '@nextui-org/react';

function App({ Component }) {
  // 2. Use at the root of your app
  return (
    <NextUIProvider>
      <Component />
    </NextUIProvider>
  );
}

Next.js

  1. 转到pages/_app.js或pages/_app.tsx（如果它不存在则创建它）并添加：
// 1. import `NextUIProvider` component
import { NextUIProvider } from '@nextui-org/react';

function MyApp({ Component, pageProps }) {
  return (
    // 2. Use at the root of your app
    <NextUIProvider>
      <Component {...pageProps} />
    </NextUIProvider>
  );
}

export default MyApp;
  1. 转到pages/_document.js或pages/_document.tsx（如果不存在则创建）并添加：
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: [<>{initialProps.styles}</>]
    };
  }

  render() {
    return (
      <Html lang="en">
        <Head>{CssBaseline.flush()}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

使用 NextUI 组件

安装 NextUI 后，您可以使用以下任何组件。NextUI 使用 tree-shaking，因此在构建过程中未使用的模块不会包含在包中，并且每个组件都单独导出。

import { Button } from '@nextui-org/react';

const Component = () => <Button>Click me</Button>;

单个组件导入

import Button from '@nextui-org/react/button';

const Component = () => <Button>Click me</Button>;

NextUIProvider 道具

属性 类型 可接受的值 描述 默认
主题 NextUIThemes 主题对象 可选的自定义主题，默认 NextUI 应用light主题 -
禁用基线 boolean true/false NextUI 自动包含<CssBaseline/> false

打字稿类型

主题对象

有关更多信息，您可以查看Stitches 主题文档

{
  "type": "light", // light / dark
  "className": "", // optional
  "theme": {
    "colors": {},
    "space": {},
    "fontSizes": {},
    "fonts": {},
    "fontWeights": {},
    "lineHeights": {},
    "letterSpacings": {},
    "sizes": {},
    "borderWidths": {},
    "borderStyles": {},
    "radii": {},
    "shadows": {},
    "zIndices": {},
    "transitions": {}
  }
}

NextUI + Next.js

服务器渲染

的所有组件@nextui-org/react都与Server Render兼容。实际上，您现在看到的页面是由服务器渲染的。

服务器端渲染 (SSR) 是在服务器上渲染网页并将其传递给浏览器（客户端）的过程，而不是在浏览器中渲染它们。SSR 向客户端发送一个完全渲染的页面；客户端的 JavaScript 包接管并启用 SPA 框架运行，在 React.js 中使用服务器端渲染的最佳选择是使用Next.js.

如果您担心通过实现服务器端呈现而失去单页应用程序的优势，您可以使用该hybrid render应用程序。请阅读Next.js 团队的帖子了解更多。

此外，对于服务器端渲染和 Web 应用程序，我们强烈建议您阅读这篇著名的帖子 丰富网络应用程序的 7 个原则来自吉列尔莫·劳赫。

Next.js

在Next.js框架，需要自定义文件_document.js，请参考Next.js 文件在这里 创建文件_document.js。

然后我们将以下代码添加到文件中：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: <>{initialProps.styles}</>
    };
  }

  render() {
    return (
      <Html lang="en">
        <Head>{CssBaseline.flush()}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

_document.js这是您的文件应该是什么样子的示例：_文档.jsx.

自定义服务器

在自定义服务器中，还可以从函数中获取样式集，CssBaseline.flush如下所示。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import React from 'react';
import ReactDOM from 'react-dom/server';
import { CssBaseline } from '@nextui-org/react';
import App from './app';

export default (req, res) => {
  const app = ReactDOM.renderToString(<App />);
  const styles = CssBaseline.flush();
  const html = ReactDOM.renderToStaticMarkup(
    <html>
      <head>{styles}</head>
      <body>
        <div id="root" dangerouslySetInnerHTML={{ __html: app }} />
      </body>
    </html>
  );
  res.end('<!doctype html>' + html);
};