react 中ant design的使用

1.antd官网

https://ant.design/docs/react/introduce-cn

2、React中全局样式使用Antd

1)、安装antd

npm install antd --save    /   yarn add antd     /  cnpm install antd --save

2)、在react项目的App.css文件中引入Antd的css

@import '~antd/dist/antd.css';

3)、如何使用一个Button:

在对应的组件中引入Antd

import { Button } from 'antd';

在html本分写

Primary

3、react中使用Antd高级配置，按需引入css样式

现在组件已经成功运行起来了，但是在实际开发过程中还有很多问题，例如上面例子实际上市加载了全部的antd组件的样式（对前端性能是个隐患）。
1)、安装antd

npm install antd --save

2)、安装（react-app-rewired）一个对 create-react-app 进行自定义配置的社区解决方案

yarn add react-app-rewired    /  cnpm install  react-app-rewired --save

3)、修改package.jsonz中react-scripts 需改为react-app-rewired

"scripts": {
  		"start": "react-app-rewired start",
  		"build": "react-app-rewired build",
  		"test": "react-app-rewired test --env=jsdom",
  		"eject": "react-app-rewired eject"
 }

4)、在项目根目录创建一个 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': '#1DA57A'},}}))

5)、安装babel-plugin-import babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件
安装customize-cra less less-loader 上↑这个插件被废弃了，新安装

yarn add babel-plugin-import   /  cnpm install babel-plugin-import --save
npm install customize-cra --save-dev  /  yarn add customize-cra --dev
yarn add less less-loader   /  npm install less less-loader -D

6)、然后移除前面在 src/App.css 里全量添加的

@import '~antd/dist/antd.css'; 

直接引入组件使用就会有对应的css：

import { Button } from 'antd';
Primary

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影