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 className="site-config-provider-calendar-wrapper">
  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. .site-config-provider-calendar-wrapper {
  2. width: 319px;
  3. border: 1px solid #d9d9d9;
  4. border-radius: 2px;
  5. }
  6. .locale-components {
  7. border-top: 1px solid #d9d9d9;
  8. padding-top: 16px;
  9. }
  10. .code-box-demo .example {
  11. margin: 16px 0;
  12. }
  13. .code-box-demo .example > * {
  14. margin-right: 8px;
  15. }
  16. .change-locale {
  17. margin-bottom: 16px;
  18. }

ConfigProvider全局化配置 - 图2

方向

这里列出了支持 rtl 方向的组件,您可以在演示中切换方向。

  1. import {
  2. Input,
  3. Col,
  4. Row,
  5. Select,
  6. InputNumber,
  7. ConfigProvider,
  8. Cascader,
  9. Radio,
  10. Switch,
  11. Tree,
  12. TreeSelect,
  13. Modal,
  14. Button,
  15. Pagination,
  16. Steps,
  17. Rate,
  18. Badge,
  19. } from 'antd';
  20. import {
  21. SearchOutlined as SearchIcon,
  22. SmileOutlined,
  23. DownloadOutlined,
  24. LeftOutlined,
  25. RightOutlined,
  26. MinusOutlined,
  27. PlusOutlined,
  28. } from '@ant-design/icons';
  29. const InputGroup = Input.Group;
  30. const ButtonGroup = Button.Group;
  31. const { Option } = Select;
  32. const { TreeNode } = Tree;
  33. const { Search } = Input;
  34. const { Step } = Steps;
  35. const cascaderOptions = [
  36. {
  37. value: 'tehran',
  38. label: 'تهران',
  39. children: [
  40. {
  41. value: 'tehran-c',
  42. label: 'تهران',
  43. children: [
  44. {
  45. value: 'saadat-abad',
  46. label: 'سعادت آیاد',
  47. },
  48. ],
  49. },
  50. ],
  51. },
  52. {
  53. value: 'ardabil',
  54. label: 'اردبیل',
  55. children: [
  56. {
  57. value: 'ardabil-c',
  58. label: 'اردبیل',
  59. children: [
  60. {
  61. value: 'primadar',
  62. label: 'پیرمادر',
  63. },
  64. ],
  65. },
  66. ],
  67. },
  68. {
  69. value: 'gilan',
  70. label: 'گیلان',
  71. children: [
  72. {
  73. value: 'rasht',
  74. label: 'رشت',
  75. children: [
  76. {
  77. value: 'district-3',
  78. label: 'منطقه ۳',
  79. },
  80. ],
  81. },
  82. ],
  83. },
  84. ];
  85. class Page extends React.Component {
  86. state = {
  87. currentStep: 0,
  88. modalVisible: false,
  89. badgeCount: 5,
  90. showBadge: true,
  91. };
  92. selectBefore = (
  93. <Select defaultValue="Http://" style={{ width: 90 }}>
  94. <Option value="Http://">Http://</Option>
  95. <Option value="Https://">Https://</Option>
  96. </Select>
  97. );
  98. selectAfter = (
  99. <Select defaultValue=".com" style={{ width: 80 }}>
  100. <Option value=".com">.com</Option>
  101. <Option value=".jp">.jp</Option>
  102. <Option value=".cn">.cn</Option>
  103. <Option value=".org">.org</Option>
  104. </Select>
  105. );
  106. // ==== Cascader ====
  107. cascaderFilter = (inputValue, path) => {
  108. return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  109. };
  110. onCascaderChange = value => {
  111. console.log(value);
  112. };
  113. // ==== End Cascader ====
  114. // ==== Modal ====
  115. showModal = () => {
  116. this.setState({
  117. modalVisible: true,
  118. });
  119. };
  120. handleOk = e => {
  121. console.log(e);
  122. this.setState({
  123. modalVisible: false,
  124. });
  125. };
  126. handleCancel = e => {
  127. console.log(e);
  128. this.setState({
  129. modalVisible: false,
  130. });
  131. };
  132. // ==== End Modal ====
  133. onStepsChange = currentStep => {
  134. console.log('onChange:', currentStep);
  135. this.setState({ currentStep });
  136. };
  137. // ==== Badge ====
  138. increaseBadge = () => {
  139. const badgeCount = this.state.badgeCount + 1;
  140. this.setState({ badgeCount });
  141. };
  142. declineBadge = () => {
  143. let badgeCount = this.state.badgeCount - 1;
  144. if (badgeCount < 0) {
  145. badgeCount = 0;
  146. }
  147. this.setState({ badgeCount });
  148. };
  149. onChangeBadge = showBadge => {
  150. this.setState({ showBadge });
  151. };
  152. // ==== End Badge ====
  153. render() {
  154. const { currentStep } = this.state;
  155. return (
  156. <div className="direction-components example">
  157. <Row>
  158. <Col span={24}>
  159. <h3 className="demo-block-title">Cascader example:</h3>
  160. <Cascader
  161. suffixIcon={<SearchIcon />}
  162. options={cascaderOptions}
  163. onChange={this.onCascaderChange}
  164. placeholder="یک مورد انتخاب کنید"
  165. popupPlacement={this.props.popupPlacement}
  166. />
  167. &nbsp;&nbsp;&nbsp;&nbsp; With search:
  168. <Cascader
  169. suffixIcon={<SmileOutlined />}
  170. options={cascaderOptions}
  171. onChange={this.onCascaderChange}
  172. placeholder="Select an item"
  173. popupPlacement={this.props.popupPlacement}
  174. showSearch={this.cascaderFilter}
  175. />
  176. </Col>
  177. </Row>
  178. <br />
  179. <Row>
  180. <Col span={12}>
  181. <h3 className="demo-block-title">Switch example:</h3>
  182. &nbsp;&nbsp;
  183. <Switch defaultChecked />
  184. &nbsp;&nbsp;
  185. <Switch loading defaultChecked />
  186. &nbsp;&nbsp;
  187. <Switch size="small" loading />
  188. </Col>
  189. <Col span={12}>
  190. <h3 className="demo-block-title">Radio Group example:</h3>
  191. <Radio.Group defaultValue="c" buttonStyle="solid">
  192. <Radio.Button value="a">تهران</Radio.Button>
  193. <Radio.Button value="b" disabled>
  194. اصفهان
  195. </Radio.Button>
  196. <Radio.Button value="c">فارس</Radio.Button>
  197. <Radio.Button value="d">خوزستان</Radio.Button>
  198. </Radio.Group>
  199. </Col>
  200. </Row>
  201. <br />
  202. <Row>
  203. <Col span={12}>
  204. <h3 className="demo-block-title">Button example:</h3>
  205. <div className="button-demo">
  206. <Button type="primary" icon={<DownloadOutlined />} />
  207. <Button type="primary" shape="circle" icon={<DownloadOutlined />} />
  208. <Button type="primary" shape="round" icon={<DownloadOutlined />} />
  209. <Button type="primary" shape="round" icon={<DownloadOutlined />}>
  210. Download
  211. </Button>
  212. <Button type="primary" icon={<DownloadOutlined />}>
  213. Download
  214. </Button>
  215. <br />
  216. <Button.Group>
  217. <Button type="primary">
  218. <LeftOutlined />
  219. Backward
  220. </Button>
  221. <Button type="primary">
  222. Forward
  223. <RightOutlined />
  224. </Button>
  225. </Button.Group>
  226. <Button type="primary" loading>
  227. Loading
  228. </Button>
  229. <Button type="primary" size="small" loading>
  230. Loading
  231. </Button>
  232. </div>
  233. </Col>
  234. <Col span={12}>
  235. <h3 className="demo-block-title">Tree example:</h3>
  236. <Tree
  237. showLine
  238. checkable
  239. defaultExpandedKeys={['0-0-0', '0-0-1']}
  240. defaultSelectedKeys={['0-0-0', '0-0-1']}
  241. defaultCheckedKeys={['0-0-0', '0-0-1']}
  242. >
  243. <TreeNode title="parent 1" key="0-0">
  244. <TreeNode title="parent 1-0" key="0-0-0" disabled>
  245. <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />
  246. <TreeNode title="leaf" key="0-0-0-1" />
  247. </TreeNode>
  248. <TreeNode title="parent 1-1" key="0-0-1">
  249. <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
  250. </TreeNode>
  251. </TreeNode>
  252. </Tree>
  253. </Col>
  254. </Row>
  255. <br />
  256. <Row>
  257. <Col span={24}>
  258. <h3 className="demo-block-title">Input (Input Group) example:</h3>
  259. <InputGroup size="large">
  260. <Row gutter={8}>
  261. <Col span={5}>
  262. <Input defaultValue="0571" />
  263. </Col>
  264. <Col span={8}>
  265. <Input defaultValue="26888888" />
  266. </Col>
  267. </Row>
  268. </InputGroup>
  269. <br />
  270. <InputGroup compact>
  271. <Input style={{ width: '20%' }} defaultValue="0571" />
  272. <Input style={{ width: '30%' }} defaultValue="26888888" />
  273. </InputGroup>
  274. <br />
  275. <InputGroup compact>
  276. <Select defaultValue="Option1">
  277. <Option value="Option1">Option1</Option>
  278. <Option value="Option2">Option2</Option>
  279. </Select>
  280. <Input style={{ width: '50%' }} defaultValue="input content" />
  281. <InputNumber />
  282. </InputGroup>
  283. <br />
  284. <Search placeholder="input search text" enterButton="Search" size="large" />
  285. <br />
  286. <br />
  287. <div style={{ marginBottom: 16 }}>
  288. <Input
  289. addonBefore={this.selectBefore}
  290. addonAfter={this.selectAfter}
  291. defaultValue="mysite"
  292. />
  293. </div>
  294. <br />
  295. <Row>
  296. <Col span={12}>
  297. <h3 className="demo-block-title">Select example:</h3>
  298. <Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
  299. <Option value="jack">Jack</Option>
  300. <Option value="مورچه">مورچه</Option>
  301. <Option value="disabled" disabled>
  302. Disabled
  303. </Option>
  304. <Option value="Yiminghe">yiminghe</Option>
  305. </Select>
  306. <Select defaultValue="مورچه" style={{ width: 120 }} disabled>
  307. <Option value="مورچه">مورچه</Option>
  308. </Select>
  309. <Select defaultValue="مورچه" style={{ width: 120 }} loading>
  310. <Option value="مورچه">مورچه</Option>
  311. </Select>
  312. <Select
  313. showSearch
  314. style={{ width: 200 }}
  315. placeholder="Select a person"
  316. optionFilterProp="children"
  317. filterOption={(input, option) =>
  318. option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
  319. }
  320. >
  321. <Option value="jack">Jack</Option>
  322. <Option value="سعید">سعید</Option>
  323. <Option value="tom">Tom</Option>
  324. </Select>
  325. </Col>
  326. <Col span={12}>
  327. <h3 className="demo-block-title">TreeSelect example:</h3>
  328. <div>
  329. <TreeSelect
  330. showSearch
  331. style={{ width: '100%' }}
  332. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  333. placeholder="Please select"
  334. allowClear
  335. treeDefaultExpandAll
  336. >
  337. <TreeNode value="parent 1" title="parent 1" key="0-1">
  338. <TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
  339. <TreeNode value="leaf1" title="my leaf" key="random" />
  340. <TreeNode value="leaf2" title="your leaf" key="random1" />
  341. </TreeNode>
  342. <TreeNode value="parent 1-1" title="parent 1-1" key="random2">
  343. <TreeNode
  344. value="sss"
  345. title={<b style={{ color: '#08c' }}>sss</b>}
  346. key="random3"
  347. />
  348. </TreeNode>
  349. </TreeNode>
  350. </TreeSelect>
  351. </div>
  352. </Col>
  353. </Row>
  354. <br />
  355. <Row>
  356. <Col span={24}>
  357. <h3 className="demo-block-title">Modal example:</h3>
  358. <div>
  359. <Button type="primary" onClick={this.showModal}>
  360. Open Modal
  361. </Button>
  362. <Modal
  363. title="پنچره ساده"
  364. visible={this.state.modalVisible}
  365. onOk={this.handleOk}
  366. onCancel={this.handleCancel}
  367. >
  368. <p>نگاشته‌های خود را اینجا قراردهید</p>
  369. <p>نگاشته‌های خود را اینجا قراردهید</p>
  370. <p>نگاشته‌های خود را اینجا قراردهید</p>
  371. </Modal>
  372. </div>
  373. </Col>
  374. </Row>
  375. <br />
  376. <Row>
  377. <Col span={24}>
  378. <h3 className="demo-block-title">Steps example:</h3>
  379. <div>
  380. <Steps progressDot current={currentStep}>
  381. <Step title="Finished" description="This is a description." />
  382. <Step title="In Progress" description="This is a description." />
  383. <Step title="Waiting" description="This is a description." />
  384. </Steps>
  385. <br />
  386. <Steps current={currentStep} onChange={this.onStepsChange}>
  387. <Step title="Step 1" description="This is a description." />
  388. <Step title="Step 2" description="This is a description." />
  389. <Step title="Step 3" description="This is a description." />
  390. </Steps>
  391. </div>
  392. </Col>
  393. </Row>
  394. <br />
  395. <Row>
  396. <Col span={12}>
  397. <h3 className="demo-block-title">Rate example:</h3>
  398. <div>
  399. <Rate defaultValue={2.5} />
  400. <br />
  401. <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
  402. supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
  403. implement rtl support.
  404. </div>
  405. </Col>
  406. <Col span={12}>
  407. <h3 className="demo-block-title">Badge example:</h3>
  408. <div>
  409. <div>
  410. <Badge count={this.state.badgeCount}>
  411. <a href="#" className="head-example" />
  412. </Badge>
  413. <ButtonGroup>
  414. <Button onClick={this.declineBadge}>
  415. <MinusOutlined />
  416. </Button>
  417. <Button onClick={this.increaseBadge}>
  418. <PlusOutlined />
  419. </Button>
  420. </ButtonGroup>
  421. </div>
  422. <div style={{ marginTop: 10 }}>
  423. <Badge dot={this.state.showBadge}>
  424. <a href="#" className="head-example" />
  425. </Badge>
  426. <Switch onChange={this.onChangeBadge} checked={this.state.showBadge} />
  427. </div>
  428. </div>
  429. </Col>
  430. </Row>
  431. </Col>
  432. </Row>
  433. <br />
  434. <br />
  435. <Row>
  436. <Col span={24}>
  437. <h3 className="demo-block-title">Pagination example:</h3>
  438. <Pagination showSizeChanger defaultCurrent={3} total={500} />
  439. </Col>
  440. </Row>
  441. <br />
  442. <Row>
  443. <Col span={24}>
  444. <h3 className="demo-block-title">Grid System example:</h3>
  445. <div className="grid-demo">
  446. <div className="code-box-demo">
  447. <p>
  448. <strong>* Note:</strong> Every calculation in RTL grid system is from right side
  449. (offset, push, etc.)
  450. </p>
  451. <Row>
  452. <Col span={8}>col-8</Col>
  453. <Col span={8} offset={8}>
  454. col-8
  455. </Col>
  456. </Row>
  457. <Row>
  458. <Col span={6} offset={6}>
  459. col-6 col-offset-6
  460. </Col>
  461. <Col span={6} offset={6}>
  462. col-6 col-offset-6
  463. </Col>
  464. </Row>
  465. <Row>
  466. <Col span={12} offset={6}>
  467. col-12 col-offset-6
  468. </Col>
  469. </Row>
  470. <Row>
  471. <Col span={18} push={6}>
  472. col-18 col-push-6
  473. </Col>
  474. <Col span={6} pull={18}>
  475. col-6 col-pull-18
  476. </Col>
  477. </Row>
  478. </div>
  479. </div>
  480. </Col>
  481. </Row>
  482. </div>
  483. );
  484. }
  485. }
  486. class App extends React.Component {
  487. state = {
  488. direction: 'ltr',
  489. popupPlacement: 'bottomLeft',
  490. };
  491. changeDirection = e => {
  492. const directionValue = e.target.value;
  493. this.setState({ direction: directionValue });
  494. if (directionValue === 'rtl') {
  495. this.setState({ popupPlacement: 'bottomRight' });
  496. } else {
  497. this.setState({ popupPlacement: 'bottomLeft' });
  498. }
  499. };
  500. render() {
  501. const { direction } = this.state;
  502. return (
  503. <div>
  504. <div className="change-direction">
  505. <span style={{ marginRight: 16 }}>Change direction of components: </span>
  506. <Radio.Group defaultValue="ltr" onChange={this.changeDirection}>
  507. <Radio.Button key="ltr" value="ltr">
  508. LTR
  509. </Radio.Button>
  510. <Radio.Button key="rtl" value="rtl">
  511. RTL
  512. </Radio.Button>
  513. </Radio.Group>
  514. </div>
  515. <ConfigProvider direction={direction}>
  516. <Page className={direction} popupPlacement={this.state.popupPlacement} />
  517. </ConfigProvider>
  518. </div>
  519. );
  520. }
  521. }
  522. ReactDOM.render(<App />, mountNode);
.direction-components {
  padding-top: 16px;
  border-top: 1px solid rgba(150, 150, 150, 0.5);
}

.example {
  margin: 16px 0;
}

.example > * {
  margin-right: 8px;
}

.change-direction {
  margin-bottom: 16px;
}
.demo-block-title {
  margin: 0 8px 18px 8px;
  border-bottom: 1px solid rgba(150, 150, 150, 0.5);
}
.button-demo .ant-btn,
.button-demo .ant-btn-group {
  margin-right: 8px;
  margin-bottom: 12px;
}
.button-demo .ant-btn-group > .ant-btn,
.button-demo .ant-btn-group > span > .ant-btn {
  margin-right: 0;
  margin-left: 0;
}
.head-example {
  display: inline-block;
  width: 42px;
  height: 42px;
  vertical-align: middle;
  background: #eee;
  border-radius: 4px;
}

.ant-badge:not(.ant-badge-not-a-wrapper) {
  margin-right: 20px;
}
.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
  margin-right: 0;
  margin-left: 20px;
}

ConfigProvider全局化配置 - 图3

组件尺寸

修改默认组件尺寸。

import React, { useState } from 'react';
import {
  ConfigProvider,
  Radio,
  Input,
  Button,
  Select,
  DatePicker,
  Divider,
  Table,
  Card,
} from 'antd';

const FormSizeDemo = () => {
  const [componentSize, setComponentSize] = useState('small');
  return (
    <div>
      <Radio.Group
        value={componentSize}
        onChange={e => {
          setComponentSize(e.target.value);
        }}
      >
        <Radio.Button value="small">Small</Radio.Button>
        <Radio.Button value="middle">Middle</Radio.Button>
        <Radio.Button value="large">Large</Radio.Button>
      </Radio.Group>
      <Divider />
      <ConfigProvider componentSize={componentSize}>
        <div className="example">
          <Input />
        </div>
        <div className="example">
          <Select defaultValue="demo" options={[{ value: 'demo' }]} />
        </div>
        <div className="example">
          <DatePicker />
        </div>
        <div className="example">
          <Button>Button</Button>
        </div>
        <div className="example">
          <Card title="Card">
            <Table
              columns={[
                { title: 'Name', dataIndex: 'name' },
                { title: 'Age', dataIndex: 'age' },
              ]}
              dataSource={[
                {
                  key: '1',
                  name: 'John Brown',
                  age: 32,
                },
                {
                  key: '2',
                  name: 'Jim Green',
                  age: 42,
                },
                {
                  key: '3',
                  name: 'Joe Black',
                  age: 32,
                },
              ]}
            />
          </Card>
        </div>
      </ConfigProvider>
    </div>
  );
};
ReactDOM.render(<FormSizeDemo />, mountNode);

API

参数说明类型默认值版本
autoInsertSpaceInButton设置为 false 时,移除按钮中 2 个汉字之间的空格booleantrue
componentSize设置 antd 组件大小small | middle | large-
csp设置 Content Security Policy 配置{ nonce: string }-
form设置 Form 组件的通用属性{ validateMessages?: ValidateMessages }-
renderEmpty自定义组件空状态。参考 空状态Function(componentName: string): ReactNode-
getPopupContainer弹出框(Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。Function(triggerNode)() => document.body
locale语言包配置,语言包可到 antd/es/locale 目录下寻找object-
prefixCls设置统一样式前缀。注意:这将不会应用由 antd 提供的默认样式stringant
pageHeader统一设置 PageHeader 的 ghost,参考 PageHeader{ ghost: boolean }'true'
direction设置文本展示方向。 示例ltr | rtlltr

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 的报错,需要增加一个判断条件

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