nextui-org / nextui的快速入门

2022-08-19 2,668 阅读1分钟

下一步行动

快速入门

安装：在你的React项目目录下，通过运行以下任一程序安装NextUI：

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

设置：为了使NextUI正常工作，你需要在你的应用程序的根部设置CssBaseline。

转到你的应用程序的根部并这样做：

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

const Application = () => (
  <NextUIProvider>
    <AppComponent /> // ---> Your App Component
  </NextUIProvider>
);

使用NextUI组件。一旦NextUI安装完毕，你可以按以下方式使用任何组件。NextUI使用树形摇动，因此在构建过程中，未使用的模块将不会被包含在捆绑中，每个组件都是单独导出的：

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

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

如果你需要，NextUI允许手动导入组件例如：

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

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