react中的antd-自定义antd的主题色_antd自定义主题色-优快云博客

本文链接：https://blog.youkuaiyun.com/hello_helloworld/article/details/126630703

本文介绍了如何在React项目中自定义Ant Design（antd）的主题色。通过引入antd的变量样式文件并配置`ConfigProvider`，可以轻松地更改全局主色、链接色等样式变量。示例代码展示了如何将主题色改为#d0021b，包括`primaryColor`、`linkColor`和`borderColorBase`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React中的antd-自定义antd的主题色

我的需求是使用antd中不同的主题色
antd的样式变量如下：

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影

引入antd.variable.min.css，替换当前项目引入样式文件：

-- import 'antd/dist/antd.min.css';
++ import 'antd/dist/antd.variable.min.css';

静态方法配置，调用 ConfigProvider 配置方法设置样式：

import { ConfigProvider } from 'antd';

ConfigProvider.config({
  theme: {
    primaryColor: '#25b864',
    linkColor;'#25b864',
  },
});

完整实例：

import 'antd/dist/antd.variable.min.css';
import { ConfigProvider } from 'antd';
import React from 'react';

// 自定义主题色
ConfigProvider.config({
    theme: {
      primaryColor: '#d0021b',
      linkColor:'#d0021b',
      borderColorBase:'#d0021b',
    },
  });

export default function App() {
    return (
        <div>App</div>
    )
}