如何修改NextUI Button默认样式？统一设置字体权重为600

方法一：通过NextUI主题配置（官方推荐） #

NextUI支持通过自定义主题全局覆盖组件基础样式，步骤如下：

1. 找到你的主题配置文件（通常是theme.ts或集成在next.config.js中）
2. 在components字段下针对Button组件修改默认字体权重：

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

const theme = createTheme({
  components: {
    Button: {
      baseStyle: {
        fontWeight: '600', // 替换默认的400
      },
    },
  },
});

export default theme;

3. 在应用根布局文件（如app/layout.tsx）中，通过NextUIProvider引入自定义主题：

import { NextUIProvider } from '@nextui-org/react';
import theme from '@/path-to-your-theme/theme';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextUIProvider theme={theme}>{children}</NextUIProvider>
      </body>
    </html>
  );
}

方法二：全局CSS覆盖 #

如果不想修改主题配置，也可以通过全局CSS强制覆盖样式：
在你的全局样式文件（如globals.css）中添加：

.nextui-btn {
  font-weight: 600;
}

若遇到样式优先级问题，可添加!important（不推荐过度使用）：

.nextui-btn {
  font-weight: 600 !important;
}

两种方法对比：

• 主题配置法：符合NextUI设计系统，无样式优先级冲突，支持精细化组件定制
• 全局CSS法：快速便捷，但可能存在样式冲突风险，适合简单的全局样式修改

内容的提问来源于stack exchange，提问作者Asaad Mahmood