1 Related documents
ant-design (domestic ant financial)
Official website:https://ant.design/index-cn
Github：https://github.com/ant-design/ant-design/
material-ui (foreign)
Official website:http://www.material-ui.com/#/
Github：https://github.com/callemall/material-ui
Note: The imported style antd.cssmay report an error, replace it withimport 'antd/dist/antd.min.css'
2 Import and customize themes on demand
The configuration file is not visible in react, it can be done if necessary npm eject, but it is not recommended. Then how do we modify the configuration:
Configure the rules in config-overrides.js, then customize-cra to execute the rules, modify the configuration file, we can not start the scaffolding with npm start, we need the react-app-rewired library to
install dependencies
npm i react-app-rewired customize-cra babel-plugin-import less less-loader
Modify package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
Create config-overrides.js in the root directory
Note: If you configure according to the custom theme of the official document, you may report an error, and you need to add another layerlessOptions
//配置具体的修改规则--写好规则--执行规则需要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' },
+ }),
---------------------------------------------------------
);
success
Remarks: There is no need to introduce styles in the component, that is: import 'antd/dist/antd.css' should be deleted