Nextui使用

最新推荐文章于 2024-10-18 10:50:03 发布

活着Viva

最新推荐文章于 2024-10-18 10:50:03 发布

阅读量1.3k

点赞数 6

分类专栏：前端文章标签： javascript react.js ecmascript

本文链接：https://blog.csdn.net/weixin_43623271/article/details/134921905

版权

本文详细介绍了如何在Next.js项目中使用NextUI，包括安装、自定义主题、设置调色板、解决水合错误、切换多个主题、应用主题颜色到组件，如Listbox、Button、Autocomplete、Modal等。同时，提供了处理错误和组件配置的实例代码，如ThemeSwitcher和Navbar的定制。此外，还分享了关于动态切换主题和管理本地存储的实践经验。

摘要由CSDN通过智能技术生成

安装和使用

https://nextui.org/docs/frameworks/nextjs

自定义主题

https://nextui.org/docs/customization/customize-theme

// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    nextui({
      themes: {
        "purple-dark": {
          extend: "dark", // <- inherit default values from dark theme
          colors: {
            background: "#0D001A",
            foreground: "#ffffff",
            primary: {
              50: "#3B096C",
              100: "#520F83",
              200: "#7318A2",
              300: "#9823C2",
              400: "#c031e2",
              500: "#DD62ED",
              600: "#F182F6",
              700: "#FCADF9",
              800: "#FDD5F9",
              900: "#FEECFE",
              DEFAULT: "#DD62ED",
              foreground: "#ffffff",
            },
            focus: "#F182F6",
          },
          layout: {
            disabledOpacity: "0.3",
            radius: {
              small: "4px",
              medium: "6px",
              large: "8px",
            },
            borderWidth: {
              small: "1px",
              medium: "2px",
              large: "3px",
            },
          },
        },
      },
    }),
  ],
};

 nextui({
      themes: {
        dark: {
          colors: {
            primary: {
              DEFAULT: "#BEF264",
              foreground: "#000000",
            },
            focus: "#BEF264",
          },
        },
      },