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