React andt库设置主题色彩

ConfigProvider 是全局配置组件，通过 theme 属性传入 token 对象，可以自定义设计令牌。

import { ConfigProvider, theme } from 'antd';

<ConfigProvider
  theme={{
    token: {
      // 基础配置
      colorPrimary: '#aaa',
      fontSize: 14,
      borderRadius: 6,
      // 颜色配置
      colorSuccess: '#52f',
      colorWarning: '#fad',
      colorError: '#f3a',
      colorInfo: '#17f',
      // 背景配置
      colorBgLayout: '#f5f5f5',
      colorBgContainer: '#ffffff',
    },
    components: {
      // 按钮
      Button: {
        colorPrimary: '#4a2',
        borderRadius: 6,
      },
      // 菜单
      Menu: {
        colorBgContainer: '#222',
        colorText: '#888',
      },
    },
  }}
>
  {children}
</ConfigProvider>

 

colorPrimary 是品牌主色，修改它会联动影响按钮、链接、选中状态等组件的颜色。

ConfigProvider.theme.token：控制 Ant Design 基础组件的全局样式（如主色 colorPrimary）。