React系统学习笔记--超基础--超详细--超简洁--React UI组件库 Ant Design（六）

1 相关文档

ant-design(国内蚂蚁金服)

官网：https://ant.design/index-cn

Github：https://github.com/ant-design/ant-design/

material-ui(国外)

官网：http://www.material-ui.com/#/

Github：https://github.com/callemall/material-ui

注意：引入样式antd.css可能报错，换为import 'antd/dist/antd.min.css'

2 按需引入与自定义主题

react中看不见配置文件，需要的话可以 npm eject，不建议这样做。那我们要修改配置怎么办：

在config-overrides.js里面配置好规则，然后customize-cra去执行规则，修改了配置文件，我们就不能用npm start启动脚手架，需要react-app-rewired库来

安装依赖

npm i react-app-rewired customize-cra babel-plugin-import less less-loader

修改package.json

	"scripts": {
    
    
	"start": "react-app-rewired start",
	"build": "react-app-rewired build",
	"test": "react-app-rewired test",
	"eject": "react-scripts eject"
	},

根目录下创建config-overrides.js

注意：如果按照官方文档的自定义主题进行配置可能会报错，需要多加一层lessOptions

//配置具体的修改规则--写好规则--执行规则需要customize-cra
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' },
		}
	}),
-------------------官方方法,会报错-------------------------    
+ addLessLoader({
    
    
+   javascriptEnabled: true,
+   modifyVars: {
    
     '@primary-color': '#1DA57A' },
+ }),
---------------------------------------------------------   
);

成功

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