如何为Antd React项目定制主题？

theme

Antd(https://ant.design/)作为一个中后台开发框架，可以说是前端开发的福音。
即使不熟悉css，设计也能开发出高质量的后台管理界面。

本文采用create-react-app来创建React项目，值得一提的是react-script最新版本解决了sass开发模式下的sourcemap支持，这让页面开发调试变得容易很多。

1.创建项目

---

npx create-react-app my-app

2. 安装相关的package

---

"dependencies": {
    "antd": "^3.14.1",
    "babel-plugin-import": "^1.11.0",
    "customize-cra": "^0.2.12",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "react": "^16.8.4",
    "react-app-rewired": "^2.1.0",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.5"
  },
  "scripts": {
    "start": "react-app-rewired   start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

以上为package.json配置内容。

添加测试组件代码

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

运行yarn start 打开http://localhost:3000/# 可以看到默认的ant组件UI。

高级设置

---

接下来设置组件的主题。因为create-react-app 屏蔽了webpack的配置文件，因此我们需要 customize-cra 这个项目来重写 less 相关的配置文件。

在项目根目录下添加config-overrides.js文件。

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    // modifyVars: { '@primary-color': '#25b864' },
  }),
);

接下来定义一个less文件覆盖ant原生的主题颜色。
my-theme.less

// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
@import "~antd/dist/antd.less";

// mapping scss veraibles to less
@dark: #343a40; // $gray-800
@cyan: #01bcd4;
@green: #66bb6a;
 
// -------- Colors -----------
@primary-color :green;
@info-color : @cyan;
@success-color : @green;
@processing-color : @blue-6;
@error-color : @red-5; // #ff4d4f
@highlight-color : @red-5;
@warning-color : @gold-5; // #ffc53d
@normal-color : #d9d9d9;

并且在App.js 中 import './my-theme.less'

修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

参考

---

https://github.com/ant-design/create-react-app-antd/