ant Design 按需引入css样式 和 修改默认主体颜色

使用ant Design组件

import React, {
          
    Component } from react
import {
          
   Button,DatePicker} from antd
import antd/dist/antd.css
import {
          
    UpOutlined, SearchOutlined } from @ant-design/icons
const {
          
   RangePicker} = DatePicker
export default class App extends Component {
          
   
  render() {
          
   
    return (
      <div>
        App....
        <button>点我</button>
        <Button type=primary>primary Button</Button>
        <Button type=link>primary Button</Button>
        <UpOutlined />
        <Button type="primary" icon={
          
   <SearchOutlined />}>
          Search
        </Button>
        <RangePicker showTime />
      </div>
    )
  }
}

按需引入antd样式

yarn add react-app-rewired customize-cra

customize-cra 用来找到config-overrider.js来进行修改 react-app-rewired是修改package.json里的启动配置的 config-overrider.js是修改规则文件

yarn add babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

config-overrider.js 文件内容

// 配置具体的修改规则
const {
          
    override, fixBabelImports } = require(customize-cra);

module.exports = override(
  fixBabelImports(import, {
          
   
    libraryName: antd,
    libraryDirectory: es,
    style: css,
  }),
);

修改 package.json 文件内容

/* package.json */
"scripts": {
          
   
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

到这里就完成了 antd 样式的按需引入

修改默认主题颜色

antd 默认主题色为蓝色，如果要改为其他颜色，配置如下：

安装 less 和 lessloader

yarn add less less-loader@7.1.0

高版本的 less-loader 可能不支持下面配置文件的写法

配置 config-overrides.js 改为：

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

module.exports = override(
  fixBabelImports("import", {
          
   
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
          
   
    lessOptions: {
          
   
      javascriptEnabled: true,
      modifyVars: {
          
    "@primary-color": "orange" },
    },
  })
);

在 12 行中修改颜色

重启项目，就可看到主题色被更改。

总结

1.安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader
2.修改package.json
	....
		"scripts": {
          
   
			"start": "react-app-rewired start",
			"build": "react-app-rewired build",
			"test": "react-app-rewired test",
			"eject": "react-scripts eject"
		},
	....
3.根目录下创建config-overrides.js
	//配置具体的修改规则
	const {
          
    override, fixBabelImports,addLessLoader} = require(customize-cra);
	module.exports = override(
		fixBabelImports(import, {
          
   
			libraryName: antd,
			libraryDirectory: es,
			style: true,
		}),
		addLessLoader({
          
   
			lessOptions:{
          
   
				javascriptEnabled: true,
				modifyVars: {
          
    @primary-color: green },
			}
		}),
	);

4.备注：不用在组件里亲自引入样式了，即：import antd/dist/antd.css’应该删掉