antd UI组件库

发布于 2022-08-10  29 次阅读


antd UI组件库

推荐看 3x 版本的文档,更详细

在 create-react-app 中使用 - Ant Design

按需引入+自定主题

高级配置

自定义主题

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'应该删掉
最后更新于 2023-07-20