React中使用antd

☞^O^

于 2024-04-22 18:01:49 发布

阅读量285

点赞数 7

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/qq_46026593/article/details/138078387

版权

本文详细介绍了如何在React项目中安装和使用AntDesign组件库，包括全局引入、按需加载样式、定制主题以及使用ConfigProvider进行个性化设置的过程。

摘要由CSDN通过智能技术生成

Ant Design官网

Ant Design - 一套企业级 UI 设计语言和 React 组件库

1.安装所用包

npm i antd

2.使用antd

import React, { Component } from 'react'
import { Button,DatePicker } from 'antd'
import {UpCircleTwoTone,WechatOutlined} from '@ant-design/icons'
import 'antd/dist/reset.css'
export default class App extends Component {
  render() {
    return (
      <div>
        App...
        <Button type="primary">Primary Button</Button>
        <UpCircleTwoTone />
        <WechatOutlined/>
        <DatePicker/>
      </div>
    )
  }
}

3.按需引入样式

（1）下载react-app-rewired，customize-cra这两个库（和antdesign版本有关）

可以指定版本react-app-rewired@2.0.2-next.0，以防报错

（2）需要在package.json文件中修改启动配置

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

（3）在根目录下建config-overrides.js文件

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

（4）下载babel-plugin-import库

（5）修改config-overrides.js文件

// 配置具体的修改规则
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
);

（6）删掉 import 'antd/dist/reset.css'

（7）重启项目

4.antd自定义主题

在antd5版本中：通过引入ConfigProvider修改

import { ConfigProvider } from 'antd';
<ConfigProvider theme={{ token: { colorPrimary: 'orange' } }}>
   <React.StrictMode>
      <BrowserRouter>
         <App />
      </BrowserRouter>
   </React.StrictMode>
</ConfigProvider>