react 中ant design的使用

「爱情、让人受尽委屈。」 2023-01-02 06:25 251阅读 0赞

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本分写

<Button type="primary">Primary</Button>

## 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';
    <Button type="primary">Primary</Button>

@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); // 浮层阴影