如何正确地使用 AntD（Ant Design）中的 ConfigProvider 进行全局配置？

在 AntD（Ant Design of Vue/Angular/React）框架中，ConfigProvider 是用于管理全局主题、国际化、路由模式等配置的组件。以下是正确使用 ConfigProvider 的步骤：

1. **导入依赖**：首先需要在项目入口文件或最高级别的应用组件中引入 ConfigProvider，并导入相关的配置对象，如 `theme`、`locale` 等。

import { ConfigProvider } from 'antd';
import { Theme } from '@ant-design/icons';

2. **设置配置**：创建一个包含所需配置的对象，例如主题颜色和语言：

const theme = {
  // 主题颜色配置
  palette: {
    primary: '#1890ff',
  },
};

// 如果需要国际化支持，可以设置 locale
const locale = {
  language: 'zh-CN', // 语言代码
};

3. **包裹组件**：将 ConfigProvider 包裹在应用程序的根组件中，传递配置对象作为 props：

<template>
  <ConfigProvider theme={theme} locale={locale}>
    <App /> {/* 你的主应用组件 */}
  </ConfigProvider>
</template>

4. **访问配置**：在需要使用配置的地方，你可以注入 `useContext` 或者通过 `antd` 提供的高阶组件来获取配置。例如，在样式组件中：

import { useTheme } from 'antd';

export default function MyComponent() {
  const theme = useTheme();
  // 使用当前的主题色
  const color = theme.palette.primary;
}