ConfigProvider 全局配置 #

概述 #

ConfigProvider 是 Ant Design 的全局配置组件，用于配置国际化、主题、组件默认属性等全局设置。

基础用法 #

国际化 #

tsx

import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';

<ConfigProvider locale={zhCN}>
  <App />
</ConfigProvider>

主题配置 #

tsx

import { ConfigProvider } from 'antd';

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#00b96b',
    },
  }}
>
  <App />
</ConfigProvider>

全局配置项 #

组件尺寸 #

tsx

import { ConfigProvider, Button, Input, Select } from 'antd';

<ConfigProvider componentSize="small">
  <Button type="primary">按钮</Button>
  <Input placeholder="输入框" />
  <Select style={{ width: 100 }} />
</ConfigProvider>

禁用动画 #

tsx

import { ConfigProvider } from 'antd';

<ConfigProvider
  button={{
    className: 'my-button',
  }}
>
  <App />
</ConfigProvider>

空状态 #

tsx

import { ConfigProvider, Empty, Table } from 'antd';

const customizeRenderEmpty = () => (
  <div style={{ textAlign: 'center' }}>
    <Empty description="暂无数据" />
  </div>
);

<ConfigProvider renderEmpty={customizeRenderEmpty}>
  <Table dataSource={[]} columns={columns} />
</ConfigProvider>

虚拟滚动 #

tsx

import { ConfigProvider, Select } from 'antd';

<ConfigProvider virtual={true}>
  <Select style={{ width: 200 }} options={largeOptions} />
</ConfigProvider>

组件默认属性 #

tsx

import { ConfigProvider, Button, Input } from 'antd';

<ConfigProvider
  button={{
    type: 'primary',
  }}
  input={{
    allowClear: true,
  }}
>
  <Button>默认主要按钮</Button>
  <Input placeholder="默认可清除" />
</ConfigProvider>

弹窗容器 #

tsx

import { ConfigProvider } from 'antd';

<ConfigProvider
  getPopupContainer={(node) => {
    if (node) {
      return node.parentNode;
    }
    return document.body;
  }}
>
  <App />
</ConfigProvider>

前缀和后缀 #

tsx

import { ConfigProvider, Button } from 'antd';

<ConfigProvider
  prefixCls="custom"
>
  <Button>自定义前缀</Button>
</ConfigProvider>

API #

ConfigProvider #

属性	说明	类型	默认值
autoInsertSpaceInButton	按钮中文字间自动插入空格	boolean	true
componentDisabled	全局禁用	boolean	-
componentSize	组件尺寸	`small` \| `middle` \| `large`	-
csp	CSP 配置		-
direction	文本方向	`ltr` \| `rtl`	`ltr`
dropdownMatchSelectWidth	下拉菜单宽度匹配	boolean \| number	true
form	Form 全局配置		-
getPopupContainer	弹出框挂载容器	(node) => HTMLElement	-
getTargetContainer	滚动容器	() => HTMLElement	-
iconPrefixCls	图标前缀	string	`anticon`
input	Input 全局配置		-
locale	语言包	object	-
pagination	分页配置		-
popupMatchSelectWidth	下拉菜单宽度匹配	boolean \| number	-
prefixCls	样式前缀	string	`ant`
renderEmpty	空状态渲染	(componentName) => ReactNode	-
space	Space 配置		-
table	Table 配置		-
theme	主题配置	ThemeConfig	-
virtual	虚拟滚动	boolean	-
warning	警告配置		-

组件配置 #

tsx

<ConfigProvider
  button={{
    className: 'my-button',
    style: { borderRadius: 4 },
  }}
  input={{
    autoComplete: 'off',
  }}
  select={{
    showSearch: true,
  }}
  table={{
    showSorterTooltip: false,
  }}
>
  <App />
</ConfigProvider>

最佳实践 #

1. 应用入口配置 #

tsx

import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';

const App = () => {
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#1677ff',
        },
      }}
      form={{
        colon: false,
        requiredMark: 'optional',
      }}
      input={{
        autoComplete: 'off',
      }}
    >
      <App />
    </ConfigProvider>
  );
};

2. 局部配置 #

tsx

import { ConfigProvider, Button } from 'antd';

<Card title="默认主题">
  <Button type="primary">默认按钮</Button>
</Card>

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#00b96b',
    },
  }}
>
  <Card title="自定义主题">
    <Button type="primary">自定义按钮</Button>
  </Card>
</ConfigProvider>

3. 嵌套配置 #

tsx

import { ConfigProvider } from 'antd';

<ConfigProvider theme={{ token: { colorPrimary: '#1677ff' } }}>
  <App>
    <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
      <Button type="primary">绿色按钮</Button>
    </ConfigProvider>
  </App>
</ConfigProvider>

下一步 #

接下来学习项目结构组件！