ConfigProvider

Provide a uniform configuration support for components.

Importimport{ ConfigProvider }from"antd";

Docs

Usage

This component provides a configuration to all React components underneath itself via the context API. In the render tree all components will have access to the provided config.

import React from 'react';
import { ConfigProvider } from 'antd';

// ...
const Demo: React.FC = () => (
  <ConfigProvider direction="rtl">
    <App />
  </ConfigProvider>
);

export default Demo;

Content Security Policy

Some components use dynamic style to support wave effect. You can config csp prop if Content Security Policy (CSP) is enabled:

<ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
  <Button>My Button</Button>
</ConfigProvider>

API

Property	Description	Type	Default	Version
componentDisabled	Config antd component `disabled`	boolean	-	4.21.0
componentSize	Config antd component size	`small` \| `middle` \| `large`	-
csp	Set Content Security Policy config	{ nonce: string }	-
direction	Set direction of layout. See demo	`ltr` \| `rtl`	`ltr`
getPopupContainer	To set the container of the popup element. The default is to create a `div` element in `body`	function(triggerNode)	() => document.body
getTargetContainer	Config Affix, Anchor scroll target container	() => HTMLElement	() => window	4.2.0
iconPrefixCls	Set icon prefix className	string	`anticon`	4.11.0
locale	Language package setting, you can find the packages in antd/locale	object	-
popupMatchSelectWidth	Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll	boolean \| number	-	5.5.0
popupOverflow	Select like component popup logic. Can set to show in viewport or follow window scroll	'viewport' \| 'scroll' Preview	'viewport'	5.5.0
prefixCls	Set prefix className	string	`ant`
renderEmpty	Set empty content of components. Ref Empty	function(componentName: string): ReactNode	-
theme	Set theme, ref Customize Theme	Theme	-	5.0.0
variant	Set variant of data entry components	`outlined` \| `filled` \| `borderless`	-	5.19.0
virtual	Disable virtual scroll when set to `false`	boolean	-	4.3.0
warning	Config warning level, when `strict` is `false`, it will aggregate deprecated information into a single message	{ strict: boolean }	-	5.10.0

ConfigProvider.config()

Setting Modal、Message、Notification static config. Not work on hooks.

ConfigProvider.config({
  // 5.13.0+
  holderRender: (children) => (
    <ConfigProvider
      prefixCls="ant"
      iconPrefixCls="anticon"
      theme={{ token: { colorPrimary: 'red' } }}
    >
      {children}
    </ConfigProvider>
  ),
});

ConfigProvider.useConfig() 5.3.0+

Available since 5.2.0. Get the value of the parent Provider. Such as DisabledContextProvider, SizeContextProvider.

const </

Ant Design

ConfigProvider

Ant Design

ConfigProvider

Usage

Content Security Policy

Examples

API

ConfigProvider.config()

ConfigProvider.useConfig() `5.3.0+`

ConfigProvider

ConfigProvider

Usage

Content Security Policy

Examples

API

ConfigProvider.config()

ConfigProvider.useConfig() 5.3.0+

ConfigProvider.useConfig() `5.3.0+`