6. React-UI antd

vant:网易的UI

element:饿了么的UI

ant-d:蚂蚁金服的UI。antd适用于的项目:成型的后台管理项目。

0 antd 版本兼容问题出错::::

一定要点4.x版本:

import { SmileOutlined } from '@ant-design/icons';

<WechatOutlined />

原因:https://blog.csdn.net/qq_23956389/article/details/111518176

1 antd 按需引入样式!!!

不能  :import 'antd/dist/antd.css';(一共60kb)

按需引入:修改脚手架的配置。create-react-app demo

yarn eject: y

暴露依赖:

yarn add react-app-rewired customize-cra

(启动脚手架,执行命令)

创建: config-overldes.js   :用于说明 修改默认配置!

按需引入,yarn add babel-plugin-import 

const {override,fixBabelImport }

yarn start : react -scripts start

2 antd-自定义主题:

主题元素:1 工作量太大。2 覆盖不了权重。

antd底层:less-》css。所有在less底层就把css修改了

安装:yarn add less less-loader

配置(4,x需要lessOption):

const  {overrilder,fixBableImoort ,addLessLoader} = require('custom-rcar');

module.exports = overrider(

fixBabelImports('import',{

libraryName:'antd',

style:true

})

addLessLoader({

lessOption:{

  javascriptEnabled:true,//允许js修改底层的less

  modif:{''},

}

})

);

原文地址:https://www.cnblogs.com/hacker-caomei/p/14373521.html