react中按需引入ant的样式

最新推荐文章于 2024-10-12 10:52:28 发布

原创最新推荐文章于 2024-10-12 10:52:28 发布 · 597 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

前端框架同时被 2 个专栏收录

18 篇文章

订阅专栏

react

13 篇文章

订阅专栏

本文详细介绍如何使用Create React App创建项目，并通过React-antd快速集成Ant Design组件库。包括安装依赖、暴露隐藏文件、配置Babel插件实现按需加载组件及样式，最后展示引入Ant Design Button组件的具体步骤。

创建项目

create-react-app react-ant

安装antd

npm install antd --save

暴露隐藏文件

npm eject

在这里插入图片描述

npm add react-app-rewired customize-cra

在这里插入图片描述

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

接着

npm add babel-plugin-import

babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

const { override, fixBabelImports } = require('customize-cra');

 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd',
     libraryDirectory: 'es',
     style: 'css',
   }),
 );

最后引入组件

import React, { Component } from 'react'
import { Button} from "antd";

export default class App extends Component {
  render() {
    return (
      <div>
        <Button type="primary" style={{ marginLeft: 8 }}>
          Primary Button
       </Button>
      </div>
    )
  }
}