antd 样式框架

Ant-Design

–蚂蚁金服出品

https://ant.design/components/icon-cn/

安装 npm i antd

引入 antd,以及样式

import {Button} from 'antd'  --组件也需要搭配对应的样式
import 'antd/dist/antd.css'

–icon 在   @ant-design/icons 中引入

import { WechatOutlined } from "@ant-design/icons";

文档推荐看 3.x 的写得详细些

---

>>按需引入 css

–节省空间，就是不用引入样式了

---

1.安装依赖：npm install react-app-rewired customize-cra babel-plugin-import

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’应该删掉

---

>>自定义主题

–因为 antd 就是 less 写的

安装 less less-loader

npm i less@3.12.2 less-loader@7.1.0

**在****config-overrides.js 设置**

addLessLoader({
lessOptions:{
//允许自定义自定义主题
javascriptEnabled: true,
//修改默认颜色 为 grenn
modifyVars: { '@primary-color': 'green' },
}
}),