ConfigProvider全局化配置

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

使用

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

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

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

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

ConfigProvider全局化配置 - 图3

组件尺寸

修改默认组件尺寸。

  1. import React, { useState } from 'react';
  2. import {
  3.   ConfigProvider,
  4.   Radio,
  5.   Input,
  6.   Button,
  7.   Select,
  8.   DatePicker,
  9.   Divider,
  10.   Table,
  11.   Card,
  12. } from 'antd';
  14. const FormSizeDemo = () => {
  15.   const [componentSize, setComponentSize] = useState('small');
  16.   return (
  17.     <div>
  18.       <Radio.Group
  19.         value={componentSize}
  20.         onChange={e => {
  21.           setComponentSize(e.target.value);
  22.         }}
  23.       >
  24.         <Radio.Button value="small">Small</Radio.Button>
  25.         <Radio.Button value="middle">Middle</Radio.Button>
  26.         <Radio.Button value="large">Large</Radio.Button>
  27.       </Radio.Group>
  28.       <Divider />
  29.       <ConfigProvider componentSize={componentSize}>
  30.         <div className="example">
  31.           <Input />
  32.         </div>
  33.         <div className="example">
  34.           <Input.Search allowClear />
  35.         </div>
  36.         <div className="example">
  37.           <Select defaultValue="demo" options={[{ value: 'demo' }]} />
  38.         </div>
  39.         <div className="example">
  40.           <DatePicker />
  41.         </div>
  42.         <div className="example">
  43.           <DatePicker.RangePicker />
  44.         </div>
  45.         <div className="example">
  46.           <Button>Button</Button>
  47.         </div>
  48.         <div className="example">
  49.           <Card title="Card">
  50.             <Table
  51.               columns={[
  52.                 { title: 'Name', dataIndex: 'name' },
  53.                 { title: 'Age', dataIndex: 'age' },
  54.               ]}
  55.               dataSource={[
  56.                 {
  57.                   key: '1',
  58.                   name: 'John Brown',
  59.                   age: 32,
  60.                 },
  61.                 {
  62.                   key: '2',
  63.                   name: 'Jim Green',
  64.                   age: 42,
  65.                 },
  66.                 {
  67.                   key: '3',
  68.                   name: 'Joe Black',
  69.                   age: 32,
  70.                 },
  71.               ]}
  72.             />
  73.           </Card>
  74.         </div>
  75.       </ConfigProvider>
  76.     </div>
  77.   );
  78. };
  79. ReactDOM.render(<FormSizeDemo />, mountNode);

API

参数说明类型默认值版本
autoInsertSpaceInButton设置为 false 时，移除按钮中 2 个汉字之间的空格booleantrue
componentSize设置 antd 组件大小small | middle | large-
csp设置 Content Security Policy 配置{ nonce: string }-
form设置 Form 组件的通用属性{ validateMessages?: ValidateMessages }-
input设置 Input 组件的通用属性{ autoComplete?: string }-4.2.0
renderEmpty自定义组件空状态。参考 空状态Function(componentName: string): ReactNode-
getPopupContainer弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。Function(triggerNode)() => document.body
getTargetContainer配置 Affix、Anchor 滚动监听容器。() => HTMLElement() => window4.2.0
locale语言包配置，语言包可到 antd/es/locale 目录下寻找object-
prefixCls设置统一样式前缀。注意：这将不会应用由 antd 提供的默认样式stringant
pageHeader统一设置 PageHeader 的 ghost，参考 PageHeader{ ghost: boolean }true
direction设置文本展示方向。 示例ltr | rtlltr
space设置 Space 的 size，参考 Space{ size: small | middle | large | number }-4.1.0
virtual设置 false 时关闭虚拟滚动boolean-4.3.0
dropdownMatchSelectWidth下拉菜单和选择器同宽。默认将设置 min-width。false 时会关闭虚拟滚动boolean | number-4.3.0

FAQ

如何增加一个新的语言包？

参考《增加语言包》。

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

请检查是否正确设置了 moment 语言包，或者是否有两个版本的 moment 共存。

  1. import 'moment/locale/zh-cn';
  2. moment.locale('zh-cn');

配置 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>