JGuang
EN

全局配置

ConfigProvider · Arco Design

交互预览
npm install @arco-design/web-react@2.66.18

全局配置 ConfigProvider

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

安装

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 的配置。booleantrue2.61.0
effectGlobalNotice是否全局设置所有 Message 和 Notification 的配置。如果用了 useMessage 的 hook 局部设置请设置为 falsebooleantrue2.40.0
rtl视图的表现形式是从右开始向左结束。boolean-2.36.0
prefixCls全局组件类名前缀stringarco-
size配置组件的默认尺寸，只会对支持size属性的组件生效。'mini' | 'small' | 'default' | 'large'default-
loadingElement全局的加载中图标，作用于所有组件。ReactNode--
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--
tablePaginationTable 全局的分页配置。PaginationProps-2.6.0
theme主题配置ThemeConfig--
getPopupContainer全局弹出框挂载的父级节点。(node: HTMLElement) => Element() => document.body-
renderEmpty全局配置组件内的空组件。(componentName?: string) => ReactNode-2.10.0

ComponentConfig

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

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

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

export type ThemeConfig = Record<string, any>;