react 修改antd主题色

最新推荐文章于 2025-04-16 09:08:16 发布

de_la_prada

最新推荐文章于 2025-04-16 09:08:16 发布

阅读量6.8k

点赞数 2

分类专栏：前端文章标签： react less javascript

本文链接：https://blog.youkuaiyun.com/weixin_41973410/article/details/106719222

版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在React项目中更改antd库的默认主题色。首先，安装antd、less、less-loader和babel依赖，特别注意less版本应为@5.0.0。接着，通过npm run eject生成config文件夹，然后在webpack.config.js中添加less-loader配置。在App.css改名为App.less后，添加自定义颜色代码，并在App.js中引入。最后运行项目，antd组件将显示为选定的cyan色。

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

antd的主题色默认是蓝色的，但是看到官网上有很多配色很好看，所以想换个颜色试试，官网提供的色系：
在这里插入图片描述

安装antd less less-loader babel依赖

npm i antd less less-loader babel-plugin-import @babel/plugin-syntax-jsx

这里需注意，less最好安装@5.0.0版本，不然后续会报兼容的错（目前不知道@6以上要如何解决）。
然后需要在项目中运行npm run eject来在项目根目录中生成config配置文件夹（若已生成忽略这一步）
生成的文件夹如下：
在这里插入图片描述

添加less-loader配置

在config文件夹下的webpack.config.js中添加如下代码：

{
     test: /\.less$/,
     use: [
       {
         loader: "style-loader"
       },
       {
         loader: "css-loader"
       },
       {
         loader: "less-loader",
         options: {
           sourceMap: true,
           modifyVars: {
             '@primary-color': '#13c2c2',　　//修改antd主题色
           },
           javascriptEnabled: true,
         }
       }]
},

App.css改为App.less，并加入以下内容：

// App.less
@import '~antd/dist/antd.less';

在App.js中引入App.less：

import React from 'react'
import { IconStyle } from './assets/iconfont/iconfont'
import { GlobalStyle } from './style'
import { renderRoutes } from 'react-router-config';//renderRoutes 读取路由配置转化为 Route 标签
import routes from './routes/index.js'
import { HashRouter } from 'react-router-dom'
import './App.less'  // 引入App.less

function App() {
  return (
    <HashRouter>
      <GlobalStyle></GlobalStyle>
      <IconStyle></IconStyle>
      { renderRoutes (routes) }
      </HashRouter>
  );
}

export default App;