ConfigProvider全局化配置

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

使用

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

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

API

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

ConfigProvider.config() 4.13.0+

设置 Modal、Message、Notification rootPrefixCls。

  1. ConfigProvider.config({
  2.   prefixCls: 'ant',
  3. });

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>