返回

React 之 Antd4.x 优化，按需引用自定义主题

前端

引言

Ant Design 是 Ant Group 出品的一款企业级 UI 组件库，深受 React 开发者的喜爱。它不仅提供了丰富的组件，而且支持主题定制，帮助开发者轻松构建美观且统一的界面。

在 Antd4.x 版本中，官方文档仅介绍了如何自定义主题。然而，在 Antd3.x 版本中，提到了可以使用 react-app-rewired 这个包来修改 React 的默认配置，配合 babel-plugin-import 插件实现按需引用组件。

本文将详细讲解如何使用 react-app-rewired 和 babel-plugin-import 来优化 Antd4.x 的使用，包括按需引用组件和自定义主题。

按需引用组件

按需引用组件是指只引用项目中实际用到的组件，而不是将整个组件库都引入项目中。这可以减少项目体积，提高性能。

要实现按需引用组件，可以使用 babel-plugin-import 插件。该插件可以将 import 语句转换为 import() 函数调用，从而实现按需加载组件。

在项目中安装 babel-plugin-import 插件：

npm install --save-dev babel-plugin-import

在 .babelrc 文件中添加如下配置：

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }
    ]
  ]
}

配置解释：

  • "libraryName"：指定组件库的名称。
  • "libraryDirectory"：指定组件库的目录。
  • "style"：指定组件库的样式加载方式。

修改项目中的组件引用方式：

// 原来
import { Button } from 'antd';

// 改为
import Button from 'antd/es/button';

自定义主题

Ant Design 提供了强大的主题定制功能，允许开发者根据自己的喜好和品牌需求调整组件的样式。

要自定义主题，需要先安装 antd 的主题包：

npm install --save-dev @ant-design/colors

然后，在项目中创建一个 theme.js 文件，并编写如下代码：

import { createTheme } from '@ant-design/colors';

const theme = createTheme({
  primaryColor: '#1890ff', // primary color for all components
  secondaryColor: '#52c41a', // secondary color for some components
  ...
});

export default theme;

最后，在项目中引入 theme.js 文件并将其应用到组件库：

import theme from './theme';

import { ConfigProvider } from 'antd';

ReactDOM.render(
  <ConfigProvider theme={theme}>
    <App />
  </ConfigProvider>,
  document.getElementById('root')
);

结语

通过按需引用组件和自定义主题，可以大幅提升 Antd4.x 的性能和个性化体验。希望本文对大家有所帮助。

附录

相关资源