ConfigProvider全局化配置

为组件提供统一的全局化配置。

使用

ConfigProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。

  1. import { ConfigProvider } from 'antd';
  2. // ...
  3. return (
  4. <ConfigProvider {...yourConfig}>
  5. <App />
  6. </ConfigProvider>
  7. );

Content Security Policy

部分组件为了支持波纹效果,使用了动态样式。如果开启了 Content Security Policy (CSP),你可以通过 csp 属性来进行配置:

  1. <ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
  2. <Button>My Button</Button>
  3. </ConfigProvider>

代码演示

ConfigProvider全局化配置 - 图1

国际化

此处列出 Ant Design 中需要国际化支持的组件,你可以在演示里切换语言。

  1. import {
  2. ConfigProvider,
  3. Pagination,
  4. DatePicker,
  5. TimePicker,
  6. Calendar,
  7. Popconfirm,
  8. Table,
  9. Modal,
  10. Button,
  11. Select,
  12. Transfer,
  13. Radio,
  14. } from 'antd';
  15. import enUS from 'antd/es/locale/en_US';
  16. import zhCN from 'antd/es/locale/zh_CN';
  17. import moment from 'moment';
  18. import 'moment/locale/zh-cn';
  19. moment.locale('en');
  20. const { Option } = Select;
  21. const { RangePicker } = DatePicker;
  22. const columns = [
  23. {
  24. title: 'Name',
  25. dataIndex: 'name',
  26. filters: [
  27. {
  28. text: 'filter1',
  29. value: 'filter1',
  30. },
  31. ],
  32. },
  33. {
  34. title: 'Age',
  35. dataIndex: 'age',
  36. },
  37. ];
  38. class Page extends React.Component {
  39. state = {
  40. visible: false,
  41. };
  42. showModal = () => {
  43. this.setState({ visible: true });
  44. };
  45. hideModal = () => {
  46. this.setState({ visible: false });
  47. };
  48. render() {
  49. const info = () => {
  50. Modal.info({
  51. title: 'some info',
  52. content: 'some info',
  53. });
  54. };
  55. const confirm = () => {
  56. Modal.confirm({
  57. title: 'some info',
  58. content: 'some info',
  59. });
  60. };
  61. return (
  62. <div className="locale-components">
  63. <div className="example">
  64. <Pagination defaultCurrent={1} total={50} showSizeChanger />
  65. </div>
  66. <div className="example">
  67. <Select showSearch style={{ width: 200 }}>
  68. <Option value="jack">jack</Option>
  69. <Option value="lucy">lucy</Option>
  70. </Select>
  71. <DatePicker />
  72. <TimePicker />
  73. <RangePicker style={{ width: 200 }} />
  74. </div>
  75. <div className="example">
  76. <Button type="primary" onClick={this.showModal}>
  77. Show Modal
  78. </Button>
  79. <Button onClick={info}>Show info</Button>
  80. <Button onClick={confirm}>Show confirm</Button>
  81. <Popconfirm title="Question?">
  82. <a href="#">Click to confirm</a>
  83. </Popconfirm>
  84. </div>
  85. <div className="example">
  86. <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
  87. </div>
  88. <div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}>
  89. <Calendar fullscreen={false} value={moment()} />
  90. </div>
  91. <div className="example">
  92. <Table dataSource={[]} columns={columns} />
  93. </div>
  94. <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
  95. <p>Locale Modal</p>
  96. </Modal>
  97. </div>
  98. );
  99. }
  100. }
  101. class App extends React.Component {
  102. constructor() {
  103. super();
  104. this.state = {
  105. locale: enUS,
  106. };
  107. }
  108. changeLocale = e => {
  109. const localeValue = e.target.value;
  110. this.setState({ locale: localeValue });
  111. if (!localeValue) {
  112. moment.locale('en');
  113. } else {
  114. moment.locale('zh-cn');
  115. }
  116. };
  117. render() {
  118. const { locale } = this.state;
  119. return (
  120. <div>
  121. <div className="change-locale">
  122. <span style={{ marginRight: 16 }}>Change locale of components: </span>
  123. <Radio.Group value={locale} onChange={this.changeLocale}>
  124. <Radio.Button key="en" value={enUS}>
  125. English
  126. </Radio.Button>
  127. <Radio.Button key="cn" value={zhCN}>
  128. 中文
  129. </Radio.Button>
  130. </Radio.Group>
  131. </div>
  132. <ConfigProvider locale={locale}>
  133. <Page
  134. key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
  135. />
  136. </ConfigProvider>
  137. </div>
  138. );
  139. }
  140. }
  141. ReactDOM.render(<App />, mountNode);
  1. .locale-components {
  2. border-top: 1px solid #d9d9d9;
  3. padding-top: 16px;
  4. }
  5. .example {
  6. margin: 16px 0;
  7. }
  8. .example > * {
  9. margin-right: 8px;
  10. }
  11. .change-locale {
  12. margin-bottom: 16px;
  13. }

API

参数说明类型默认值版本
autoInsertSpaceInButton设置为 false 时,移除按钮中 2 个汉字之间的空格booleantrue3.13.0
csp设置 Content Security Policy 配置{ nonce: string }-3.13.1
renderEmpty自定义组件空状态。参考 空状态Function(componentName: string): ReactNode-3.12.2
getPopupContainer弹出框(Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。Function(triggerNode)() => document.body3.11.0
locale语言包配置,语言包可到 antd/es/locale 目录下寻找object-3.21.0
prefixCls设置统一样式前缀stringant3.12.0
pageHeader统一设置 pageHeader 的 ghost,参考 pageHeader-cn/){ ghost: boolean }'true'3.24.0

FAQ

为什么我使用了 ConfigProvider locale,时间类组件的国际化还有问题?

请检查是否设置了 moment.locale('zh-cn'),或者是否有两个版本的 moment 共存。

配置 getPopupContainer 导致 Modal 报错?

相关 issue:https://github.com/ant-design/ant-design/issues/19974

当如下全局设置 getPopupContainer 为触发节点的 parentNode 时,由于 Modal 的用法不存在 triggerNode,这样会导致 triggerNode is undefined 的报错,需要增加一个判断条件

  1. <ConfigProvider
  2. - getPopupContainer={triggerNode => triggerNode.parentNode}
  3. + getPopupContainer={node => {
  4. + if (node) {
  5. + return node.parentNode;
  6. + }
  7. + return document.body;
  8. + }}
  9. >
  10. <App />
  11. </ConfigProvider>