# 全局配置 ConfigProvider

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/config-provider
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

在应用的最外层进行配置，一次设置，全局生效。一般用于设置国际化语言等功能。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：设置国际化语言的基础用法。
- **表格分页配置**：配置全局的表格分页参数，比如可以全局设置 `tablePagination.hideOnSinglePage`, 当表格数据小于等于一页的时候隐藏分页。
- **空元素**：通过 `renderEmpty` 可以定义组件内显示的空元素。
- **组件配置**：全局设置各组件默认配置。
- **RTL 视图**：设置组件为从右向左阅读的视图。
- **局部修改 Message 配置**：通过 `ConfigProvider` 设置的 `prefixCls` 和 `rtl` 默认会作用在所有的 `Message` 和 `Notification` 上 如果希望能只在 `ConfigProvider` 内部作用，需要结合 `useMessage` 或者  `useNotification` 使用，并且关闭 `effectGlobalNotice` **此功能在2.40.0支持**
- **局部修改 Modal 配置**：通过 `ConfigProvider` 设置的 `prefixCls` 和 `rtl` 默认会作用在所有的 `Modal` 函数方法上，如果希望局部设置不影响全局配置，可以关闭 `effectGlobalModal`。 **此功能在2.61.0支持**

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### ConfigProvider

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|autoInsertSpaceInButton|当按钮中是两个汉字时，自动在两个汉字中添加一个空格。|boolean |`-`|2.3.0|
|effectGlobalModal|是否全局设置所有 `Modal` 的配置。|boolean |`true`|2.61.0|
|effectGlobalNotice|是否全局设置所有 `Message` 和 `Notification` 的配置。如果用了 `useMessage` 的 hook 局部设置请设置为 false|boolean |`true`|2.40.0|
|rtl|视图的表现形式是从右开始向左结束。|boolean |`-`|2.36.0|
|prefixCls|全局组件类名前缀|string |`arco`|-|
|size|配置组件的默认尺寸，只会对支持`size`属性的组件生效。|'mini' \| 'small' \| 'default' \| 'large' |`default`|-|
|loadingElement|全局的加载中图标，作用于所有组件。|ReactNode |`-`|-|
|componentConfig|用于全局配置所有组件的默认参数|[ComponentConfig](#componentconfig) |`-`|2.23.0|
|focusLock|全局配置弹出框的 `focusLock`，作用于 `Modal` `Drawer` 组件。|{modal?: boolean \| { autoFocus?: boolean };drawer?: boolean \| { autoFocus?: boolean };} |`{ modal: { autoFocus: true }, drawer: { autoFocus: true }}`|2.13.0|
|locale|设置语言包|[Locale](#locale) |`-`|-|
|tablePagination|Table 全局的分页配置。|[PaginationProps](pagination#pagination) |`-`|2.6.0|
|theme|主题配置|[ThemeConfig](#themeconfig) |`-`|-|
|getPopupContainer|全局弹出框挂载的父级节点。|(node: HTMLElement) => Element |`() => document.body`|-|
|renderEmpty|全局配置组件内的空组件。|(componentName?: string) => ReactNode |`-`|2.10.0|

### ComponentConfig

```js
export type ComponentConfig = {
  Affix?: AffixProps;
  Alert?: AlertProps;
  AutoComplete?: AutoCompleteProps;
  Avatar?: AvatarProps;
  "Avatar.Group"?: AvatarGroupProps;
  Anchor?: AnchorProps;
  "Anchor.Link"?: AnchorLinkProps;
  BackTop?: BackTopProps;
  Badge?: BadgeProps;
  Breadcrumb?: BreadcrumbProps;
  Button?: ButtonProps;
  Calendar?: CalendarProps;
  Card?: CardProps;
  Carousel?: CarouselProps;
  Cascader?: CascaderProps;
  Checkbox?: CheckboxProps;
  Collapse?: CollapseProps;
  Comment?: CommentProps;
  ColorPicker?: ColorPickerProps;
  DatePicker?: Omit<
    DatePickerCommonProps,
    | "placeholder"
    | "onChange"
    | "onSelect"
    | "onOk"
    | "defaultPickerValue"
    | "pickerValue"
    | "onPickerValueChange"
    | "inputProps"
  >;
  Descriptions?: DescriptionsProps;
  Divider?: DividerProps;
  Drawer?: DrawerProps;
  Dropdown?: DropdownProps;
  "Dropdown.Button"?: DropdownButtonProps;
  Empty?: EmptyProps;
  "Typography.Ellipsis"?: TypographyEllipsisProps;
  Form?: FormProps;
  "Grid.Row"?: RowProps;
  "Grid.Col"?: ColProps;
  Grid?: GridProps;
  "Grid.GridItem"?: GridItemProps;
  Image?: ImageProps;
  Input?: InputProps;
  InputNumber?: InputNumberProps;
  VerificationCode?: VerificationCodeProps;
  Watermark?: WatermarkProps;
  InputTag?: InputTagProps;
  Layout?: LayoutProps;
  Link?: LinkProps;
  List?: ListProps;
  "List.Item"?: ListItemProps;
  Mentions?: MentionsProps;
  Menu?: MenuProps;
  Modal?: ModalProps;
  PageHeader?: PageHeaderProps;
  Pagination?: PaginationProps;
  Popconfirm?: PopconfirmProps;
  Popover?: PopoverProps;
  Progress?: ProgressProps;
  Radio?: RadioProps;
  "Radio.Group"?: RadioGroupProps;
  Rate?: RateProps;
  ResizeBox?: ResizeBoxProps;
  Result?: ResultProps;
  Select?: SelectProps;
  Skeleton?: SkeletonProps;
  Slider?: SliderProps;
  Space?: SpaceProps;
  Spin?: SpinProps;
  Statistic?: StatisticProps;
  Steps?: StepsProps;
  Switch?: SwitchProps;
  Table?: TableProps;
  Tabs?: TabsProps;
  TreeProps?: TreeProps;
  TriggerProps?: TriggerProps;
  Tag?: TagProps;
  Timeline?: TimelineProps;
  "Timeline.Item"?: TimelineItemProps;
  TimePicker?: TimePickerCommonProps;
  Tooltip?: TooltipProps;
  Transfer?: TransferProps;
  Tree?: TreeProps;
  TreeSelect?: TreeSelectProps;
  Trigger?: TriggerProps;
  Upload?: UploadProps;
};
```

### Locale

```js
export interface Locale {
  locale: string;
  dayjsLocale?: string;
  Calendar: CalendarType;
  DatePicker: {
    Calendar: CalendarType;
    [key: string]: any;
  };
  Drawer: Record<string, any>;
  Empty: Record<string, any>;
  Modal: Record<string, any>;
  Pagination: Record<string, any>;
  Popconfirm: Record<string, any>;
  Table: Record<string, any>;
  TimePicker: Record<string, any>;
  Upload: Record<string, any>;
  Progress: Record<string, any>;
  Typography: Record<string, any>;
  Transfer: Record<string, any>;
  ImagePreview: Record<string, any>;
  Form?: Record<string, any>;
  ColorPicker: Record<string, any>;
}
```

### CalendarType

```js
type CalendarType = {
  today: string;
  view: Record<string, any>;
  month: {
    short: Record<string, any>;
    long: Record<string, any>;
  };
  week: {
    short: Record<string, any>;
    long: Record<string, any>;
  };
  formatYear?: string;
  formatMonth?: string;
  monthBeforeYear?: boolean;
};
```

### ThemeConfig

```js
export type ThemeConfig = Record<string, any>;
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt