react中的ui组件antd使用

原创于 2021-09-06 19:41:28 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

react 专栏收录该内容

13 篇文章

订阅专栏

本文档介绍了如何在React项目中使用react-app-rewired和customize-cra来实现Ant Design的按需引入和自定义主题。首先，你需要安装相关依赖，如react-app-rewired、customize-cra、babel-plugin-import、less和less-loader。接着，修改package.json文件，将脚本替换为使用react-app-rewired。然后，在根目录创建config-overrides.js，配置babel-plugin-import以按需加载Antd组件，并设置lessLoader以启用主题定制，例如将默认主题颜色改为绿色。最后，记得删除组件内直接引入的antd.css。通过这些步骤，你可以优化项目的体积并实现个性化主题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd的按需引入+自定主题

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