Nextjs配合nextui框架进行页面开发

使用方式同上：

import * as React from "react";


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

function Layout({ children }: { children: ReactElement }) {
  // 需要在顶层嵌套
  return (
    <NextUIProvider>
      { children  }
    </NextUIProvider>
  );
}

注意

需要注意的是当我们使用pnpm 工具来进行库的依赖管理的话，我们需要在我们的项目根目录下的.npmrc文件添加如下配置：

public-hoist-pattern[]=*@nextui-org/*

文件修改完成后需要使用pnpm install重写安装依赖，确保依赖的安装正常。

使用

安装完成NextUI后，我们就可以在页面中使用NextUI的组件了，代码如下：

// page.tsx
import {Button} from '@nextui-org/button';
import clsx from 'clsx';
import styles from './index.module.css';

const ToolkitPage = (props: any) => {
  return (
    <div className={clsx(styles.document, 'bg-white p-[30px]')}>
      <Button color='primary'>按钮</Button>
      <Button disabled className='ml-20'>禁用</Button>
    </div>
  );
};
export default ToolkitPage;

自定义样式

实现NextUI的自定义样式，我们可以通过如下设置来实现。

组件自定义

在开始使用前我们需要通过NextUIProvider组件来进行嵌套包裹，这里可以

import * as React from "react";


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

function Layout({ children }: { children: ReactElement }) {
  // 需要在顶层嵌套
  return (
    <NextUIProvider className="dark text-foreground bg-background">
      { children  }
    </NextUIProvider>
  );
}

Tailwind CSS配置

需要在tailwind.config.js中配置对应模式的样式格式，在如上的插件nextui()：

module.exports = {
  plugins: [
    nextui({
      prefix: "nextui", // prefix for themes variables
      addCommonColors: false, // override common colors (e.g. "blue", "green", "pink").
      defaultTheme: "light", // default theme from the themes object
      defaultExtendTheme: "light", // default theme to extend on custom themes
      layout: {}, // common layout tokens (applied to all themes)
      themes: {
        light: {
          layout: {}, // light theme layout tokens
          colors: {}, // light theme colors
        },
        dark: {
          layout: {}, // dark theme layout tokens
          colors: {}, // dark theme colors
        },
        // ... custom themes
      },
    }),
  ],
};

样式属性支持

themes配置样式：

type ConfigTheme = {
  extend?: "light" | "dark"; // base theme to extend
  layout?: LayoutTheme; // see LayoutTheme
  colors?: ThemeColors; // see ThemeColors
};

type ConfigThemes = Record<string, ConfigTheme>;

tailwindcss支持配置支持属性

type BaseThemeUnit = {
  small?: string;
  medium?: string;
  large?: string;
};

type FontThemeUnit = {
  small?: string;
  medium?: string;
  large?: string;
  tiny?: string;
};

interface LayoutTheme {
  /**
   * Base unit token that defines a consistent spacing scale across
   * the components.
   */
  spacingUnit?: number;
  /**
   * The default font size applied across the components.
   */
  fontSize?: FontThemeUnit;
  /**
   * The default line height applied across the components.
   */
  lineHeight?: FontThemeUnit;
  /**
   * The default radius applied across the components.
   * we recommend to use `rem` units.
   */
  radius?: BaseThemeUnit;
  /**
   * A number between 0 and 1 that is applied as opacity-[value] when
   * the component is disabled.
   */
  disabledOpacity?: string | number;
  /**
   * The default height applied to the divider component.
   * we recommend to use `px` units.
   */
  dividerWeight?: string;
  /**
   * The border width applied across the components.
   */
  borderWidth?: BaseThemeUnit;
  /**
   * The box shadow applied across the components.
   */
  boxShadow?: BaseThemeUnit;
}

支持颜色配置：

type ColorScale = {
  50: string;
  100: string;
  200: string;
  300: string;
  400: string;
  500: string;
  600: string;
  700: string;
  800: string;
  900: string;
  foreground: string; // contrast color
  DEFAULT: string;
};

type BaseColors = {
  background: ColorScale; // the page background color
  foreground: ColorScale; // the page text color
  divider: ColorScale; // used for divider and single line border
  overlay: ColorScale; // used for modal, popover, etc.
  focus: ColorScale; // used for focus state outline
  content1: ColorScale; // used for card, modal, popover, etc.
  content2: ColorScale;
  content3: ColorScale;
  content4: ColorScale;
};

// brand colors
type ThemeColors = BaseColors & {
  default: ColorScale;
  primary: ColorScale;
  secondary: ColorScale;
  success: ColorScale;
  warning: ColorScale;
  danger: ColorScale;
};