ant-design/46c97137-async.6e88b736.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["46c97137"],{"46c97137":function(a,e,n){"use strict";n.d(e,"__esModule",{value:!0}),n.d(e,"texts",{enumerable:!0,get:function(){return d;}}),n("b84315a0");let d=[{value:"\u672C\u6587\u6863\u5C06\u5E2E\u52A9\u4F60\u4ECE antd ",paraId:0},{value:"4.x",paraId:0},{value:" \u7248\u672C\u5347\u7EA7\u5230 antd ",paraId:0},{value:"5.x",paraId:0},{value:" \u7248\u672C\uFF0C\u5982\u679C\u4F60\u662F ",paraId:0},{value:"3.x",paraId:0},{value:" \u6216\u8005\u66F4\u8001\u7684\u7248\u672C\uFF0C\u8BF7\u5148\u53C2\u8003\u4E4B\u524D\u7684",paraId:0},{value:"\u5347\u7EA7\u6587\u6863",paraId:0},{value:"\u5347\u7EA7\u5230 4.x\u3002",paraId:0},{value:"\u8BF7\u5148\u5347\u7EA7\u5230 4.x \u7684\u6700\u65B0\u7248\u672C\uFF0C\u6309\u7167\u63A7\u5236\u53F0 warning \u4FE1\u606F\u79FB\u9664/\u4FEE\u6539\u76F8\u5173\u7684 API\u3002",paraId:1,tocIndex:0},{value:"\u57FA\u7840\u5706\u89D2\u8C03\u6574\uFF0C\u7531\u7EDF\u4E00\u7684 ",paraId:2,tocIndex:2},{value:"2px",paraId:2,tocIndex:2},{value:" \u6539\u4E3A\u56DB\u7EA7\u5706\u89D2\uFF0C\u5206\u522B\u4E3A ",paraId:2,tocIndex:2},{value:"2px",paraId:2,tocIndex:2},{value:" ",paraId:2,tocIndex:2},{value:"4px",paraId:2,tocIndex:2},{value:" ",paraId:2,tocIndex:2},{value:"6px",paraId:2,tocIndex:2},{value:" ",paraId:2,tocIndex:2},{value:"8px",paraId:2,tocIndex:2},{value:"\uFF0C\u5206\u522B\u5E94\u7528\u4E8E\u4E0D\u540C\u573A\u666F\uFF0C\u6BD4\u5982\u9ED8\u8BA4\u5C3A\u5BF8\u7684 Button \u7684\u5706\u89D2\u8C03\u6574\u4E3A\u4E86 ",paraId:2,tocIndex:2},{value:"6px",paraId:2,tocIndex:2},{value:"\u3002",paraId:2,tocIndex:2},{value:"\u4E3B\u8272\u8C03\u6574\uFF0C\u7531 ",paraId:2,tocIndex:2},{value:"#1890ff",paraId:2,tocIndex:2},{value:" \u6539\u4E3A ",paraId:2,tocIndex:2},{value:"#1677ff",paraId:2,tocIndex:2},{value:"\u3002",paraId:2,tocIndex:2},{value:"\u6574\u4F53\u9634\u5F71\u8C03\u6574\uFF0C\u7531\u539F\u672C\u7684\u4E09\u7EA7\u9634\u5F71\u8C03\u6574\u4E3A\u4E24\u7EA7\uFF0C\u5206\u522B\u7528\u4E8E\u5E38\u9A7B\u9875\u9762\u7684\u7EC4\u4EF6\uFF08\u5982 Card\uFF09\u548C\u4EA4\u4E92\u53CD\u9988\uFF08\u5982 Dropdown\uFF09\u3002",paraId:2,tocIndex:2},{value:"\u90E8\u5206\u7EC4\u4EF6\u5185\u95F4\u8DDD\u8C03\u6574\u3002",paraId:2,tocIndex:2},{value:"\u6574\u4F53\u53BB\u7EBF\u6846\u5316\u3002",paraId:2,tocIndex:2},{value:"\u5F03\u7528 less\uFF0C\u91C7\u7528 CSS-in-JS\uFF0C\u66F4\u597D\u5730\u652F\u6301\u52A8\u6001\u4E3B\u9898\u3002\u5E95\u5C42\u4F7F\u7528 ",paraId:3,tocIndex:3},{value:"@ant-design/cssinjs",paraId:3,tocIndex:3},{value:" \u4F5C\u4E3A\u89E3\u51B3\u65B9\u6848\u3002\n",paraId:3,tocIndex:3},{value:"\u6240\u6709 less \u6587\u4EF6\u5168\u90E8\u79FB\u9664\uFF0Cless \u53D8\u91CF\u4E0D\u518D\u652F\u6301\u900F\u51FA\u3002",paraId:4,tocIndex:3},{value:"\u4EA7\u7269\u4E2D\u4E0D\u518D\u5305\u542B css \u6587\u4EF6\u3002\u7531\u4E8E CSS-in-JS \u652F\u6301\u6309\u9700\u5F15\u5165\uFF0C\u539F\u672C\u7684 ",paraId:4,tocIndex:3},{value:"antd/dist/antd.css",paraId:4,tocIndex:3},{value:" \u4E5F\u5DF2\u7ECF\u79FB\u9664\uFF0C\u5982\u679C\u9700\u8981\u91CD\u7F6E\u4E00\u4E9B\u57FA\u672C\u6837\u5F0F\u8BF7\u5F15\u5165 ",paraId:4,tocIndex:3},{value:"antd/dist/reset.css",paraId:4,tocIndex:3},{value:"\u3002",paraId:4,tocIndex:3},{value:"\u5982\u679C\u9700\u8981\u7EC4\u4EF6\u91CD\u7F6E\u6837\u5F0F\uFF0C\u53C8\u4E0D\u60F3\u5F15\u5165 ",paraId:4,tocIndex:3},{value:"antd/dist/reset.css",paraId:4,tocIndex:3},{value:" \u4ECE\u800C\u5BFC\u81F4\u6C61\u67D3\u5168\u5C40\u6837\u5F0F\u7684\u8BDD\uFF0C\u53EF\u4EE5\u5C1D\u8BD5\u5728\u5E94\u7528\u6700\u5916\u5C42\u4F7F\u7528",paraId:4,tocIndex:3},{value:"App \u7EC4\u4EF6",paraId:5,tocIndex:3},{value:"\uFF0C\u89E3\u51B3\u539F\u751F\u5143\u7D20\u6CA1\u6709 antd \u89C4\u8303\u6837\u5F0F\u7684\u95EE\u9898\u3002",paraId:4,tocIndex:3},{value:"\u79FB\u9664 css variables \u4EE5\u53CA\u5728\u6B64\u4E4B\u4E0A\u6784\u7B51\u7684\u52A8\u6001\u4E3B\u9898\u65B9\u6848\u3002",paraId:3,tocIndex:3},{value:"LocaleProvider \u5728 4.x \u4E2D\u5DF2\u7ECF\u5E9F\u5F03\uFF08\u4F7F\u7528 ",paraId:3,tocIndex:3},{value:"<ConfigProvider locale />",paraId:3,tocIndex:3},{value:" \u66FF\u4EE3\uFF09\uFF0C\u6211\u4EEC\u5728 5.x \u91CC\u5F7B\u5E95\u79FB\u9664\u4E86\u76F8\u5173\u76EE\u5F55 ",paraId:3,tocIndex:3},{value:"antd/es/locale-provider",paraId:3,tocIndex:3},{value:"\u3001",paraId:3,tocIndex:3},{value:"antd/lib/locale-provider",paraId:3,tocIndex:3},{value:"\u3002",paraId:3,tocIndex:3},{value:"\u5185\u7F6E\u7684\u65F6\u95F4\u5E93\u4F7F\u7528 Dayjs \u66FF\u4EE3 Moment.js\uFF0C\u5177\u4F53\u8BF7\u67E5\u770B ",paraId:3,tocIndex:3},{value:"\u4F7F\u7528\u81EA\u5B9A\u4E49\u65E5\u671F\u5E93",paraId:6,tocIndex:3},{value:"\u3002",paraId:3,tocIndex:3},{value:"\u4E0D\u518D\u652F\u6301 ",paraId:3,tocIndex:3},{value:"babel-plugin-import",paraId:3,tocIndex:3},{value:"\uFF0CCSS-in-JS \u672C\u8EAB\u5177\u6709\u6309\u9700\u52A0\u8F7D\u7684\u80FD\u529B\uFF0C\u4E0D\u518D\u9700\u8981\u63D2\u4EF6\u652F\u6301\u3002",paraId:3,tocIndex:3},{value:"\u4E0D\u518D\u652F\u6301 IE \u6D4F\u89C8\u5668\u3002",paraId:7,tocIndex:4},{value:"\u7EC4\u4EF6\u5F39\u6846\u7684 classname API \u7EDF\u4E00\u4E3A ",paraId:8,tocIndex:5},{value:"popupClassName",paraId:8,tocIndex:5},{value:"\uFF0C",paraId:8,tocIndex:5},{value:"dropdownClassName",paraId:8,tocIndex:5},{value:" \u7B49\u7C7B\u4F3C API \u90FD\u4F1A\u88AB\u66FF\u6362\u3002",paraId:8,tocIndex:5},{value:"AutoComplete \u7EC4\u4EF6",paraId:9,tocIndex:5},{value:"Cascader \u7EC4\u4EF6",paraId:9,tocIndex:5},{value:"Select \u7EC4\u4EF6",paraId:9,tocIndex:5},{value:"TreeSelect \u7EC4\u4EF6",paraId:9,tocIndex:5},{value:"TimePicker \u7EC4\u4EF6",paraId:9,tocIndex:5},{value:"DatePicker \u7EC4\u4EF6",paraId:9,tocIndex:5},{value:"Mentions \u7EC4\u4EF6",paraId:9,tocIndex:5},{value:'  import { Select } from \'antd\';\n\n  const App: React.FC = () => (\n    <Select\n-     dropdownClassName="my-select-popup"\n+     popupClassName="my-select-popup"\n    />\n  );\n\n  export default App;\n',paraId:10,tocIndex:5},{value:"\u7EC4\u4EF6\u5F39\u6846\u7684\u53D7\u63A7\u53EF\u89C1 API \u7EDF\u4E00\u4E3A ",paraId:11,tocIndex:5},{value:"open",paraId:11,tocIndex:5},{value:"\uFF0C",paraId:11,tocIndex:5},{value:"visible",paraId:11,tocIndex:5},{value:" \u7B49\u7C7B\u4F3C API \u90FD\u4F1A\u88AB\u66FF\u6362\u3002",paraId:11,tocIndex:5},{value:"Drawer \u7EC4\u4EF6 ",paraId:12,tocIndex:5},{value:"visible",paraId:12,tocIndex:5},{value:" \u53D8\u4E3A ",paraId:12,tocIndex:5},{value:"open",paraId:12,tocIndex:5},{value:"\u3002",paraId:12,tocIndex:5},{value:"Modal \u7EC4\u4EF6 ",paraId:12,tocIndex:5},{value:"visible",paraId:12,tocIndex:5},{value:" \u53D8\u4E3A ",paraId:12,tocIndex:5},{value:"open",paraId:12,tocIndex:5},{value:"\u3002",paraId:12,tocIndex:5},{value:"Dropdown \u7EC4\u4EF6 ",paraId:12,tocIndex:5},{value:"visible",paraId:12,tocIndex:5},{value:" \u53D8\u4E3A ",paraId:12,tocIndex:5},{value:"open",paraId:12,tocIndex:5},{value:"\u3002",paraId:12,tocIndex:5},{value:"Tooltip \u7EC4\u4EF6 ",paraId:12,tocIndex:5},{value:"visible",paraId:12,tocIndex:5},{value:" \u53D8\u4E3A ",paraId:12,tocIndex:5},{value:"open",paraId:12,tocIndex:5},{value:"\u3002",paraId:12,tocIndex:5},{value:"Tag \u7EC4\u4EF6 ",paraId:12,tocIndex:5},{value:"visible",paraId:12,tocIndex:5},{value:" \u5DF2\u79FB\u9664\u3002",paraId:12,tocIndex:5},{value:"Slider \u7EC4\u4EF6 ",paraId:12,tocIndex:5},{value:"tooltip",paraId:12,tocIndex:5},{value:" \u76F8\u5173 API \u6536\u655B\u5230 ",paraId:12,tocIndex:5},{value:"tooltip",paraId:12,tocIndex:5},{value:" \u5C5E\u6027\u4E2D\u3002",paraId:12,tocIndex:5},{value:"Table \u7EC4\u4EF6 ",paraId:12,tocIndex:5},{value:"filterDropdownVisible",paraId:12,tocIndex:5},{value:" \u53D8\u4E3A ",paraId:12,tocIndex:5},{value:"filterDropdownOpen",paraId:12,tocIndex:5},{value:"\u3002",paraId:12,tocIndex:5},{value:"  import { Modal, Tag, Table, Slider } from 'antd';\n\n  const App: React.FC = () => {\n    const [visible, setVisible] = useState(true);\n\n    return (\n      <>\n-       <Modal visible={visible}>content</Modal>\n+       <Modal open={visible}>content</Modal>\n\n-       <Tag visible={visible}>tag</Tag>\n+       {visible && <Tag>tag</Tag>}\n\n        <Table\n          data={[]}\n          columns={[\n            {\n              title: 'Name',\n              dataIndex: 'name',\n-             filterDropdownVisible: visible,\n+             filterDropdownOpen: visible,\n            }\n          ]}\n        />\n\n-       <Slider tooltipVisible={visible} />\n+       <Slider tooltip={{ open: visible }} />\n      </>\n    );\n  }\n\n  export default App;\n",paraId:13,tocIndex:5},{value:"getPopupContainer",paraId:14,tocIndex:5},{value:": \u6240\u6709\u7684 ",paraId:14,tocIndex:5},{value:"getPopupContainer",paraId:14,tocIndex:5},{value:" \u90FD\u9700\u8981\u4FDD\u8BC1\u8FD4\u56DE\u7684\u662F\u552F\u4E00\u7684 div\u3002React 18 concurrent \u4E0B\u4F1A\u53CD\u590D\u8C03\u7528\u8BE5\u65B9\u6CD5\u3002",paraId:14,tocIndex:5},{value:"Upload List dom \u7ED3\u6784\u53D8\u5316\u3002",paraId:15,tocIndex:5},{value:"#34528",paraId:15,tocIndex:5},{value:"Notification",paraId:16,tocIndex:5},{value:"\u9759\u6001\u65B9\u6CD5\u4E0D\u518D\u5141\u8BB8\u5728 ",paraId:17,tocIndex:5},{value:"open",paraId:17,tocIndex:5},{value:" \u4E2D\u52A8\u6001\u8BBE\u7F6E ",paraId:17,tocIndex:5},{value:"prefixCls",paraId:17,tocIndex:5},{value:" ",paraId:17,tocIndex:5},{value:"maxCount",paraId:17,tocIndex:5},{value:" ",paraId:17,tocIndex:5},{value:"top",paraId:17,tocIndex:5},{value:" ",paraId:17,tocIndex:5},{value:"bottom",paraId:17,tocIndex:5},{value:" ",paraId:17,tocIndex:5},{value:"getContainer",paraId:17,tocIndex:5},{value:"\uFF0CNotification \u9759\u6001\u65B9\u6CD5\u73B0\u5728\u5C06\u53EA\u6709\u4E00\u4E2A\u5B9E\u4F8B\u3002\u5982\u679C\u9700\u8981\u4E0D\u540C\u914D\u7F6E\uFF0C\u8BF7\u4F7F\u7528 ",paraId:17,tocIndex:5},{value:"useNotification",paraId:17,tocIndex:5},{value:"\u3002",paraId:17,tocIndex:5},{value:"close",paraId:17,tocIndex:5},{value:" \u6539\u540D\u4E3A ",paraId:17,tocIndex:5},{value:"destroy",paraId:17,tocIndex:5},{value:"\uFF0C\u548C message \u4FDD\u6301\u4E00\u81F4\u3002",paraId:17,tocIndex:5},{value:"Drawer ",paraId:18,tocIndex:5},{value:"style",paraId:18,tocIndex:5},{value:" \u548C ",paraId:18,tocIndex:5},{value:"className",paraId:18,tocIndex:5},{value:" \u8FC1\u79FB\u81F3 Drawer \u5F39\u5C42\u533A\u57DF\u4E0A\uFF0C\u539F\u5C5E\u6027\u66FF\u6362\u4E3A ",paraId:18,tocIndex:5},{value:"rootClassName",paraId:18,tocIndex:5},{value:" \u548C ",paraId:18,tocIndex:5},{value:"rootStyle",paraId:18,tocIndex:5},{value:"\u3002",paraId:18,tocIndex:5},{value:"4.x \u4E2D\u5DF2\u7ECF\u5E9F\u5F03\u7684 ",paraId:19,tocIndex:5},{value:"message.warn",paraId:19,tocIndex:5},{value:" \u73B0\u5728\u88AB\u5F7B\u5E95\u79FB\u9664\uFF0C\u8BF7\u4F7F\u7528 ",paraId:19,tocIndex:5},{value:"message.warning",paraId:19,tocIndex:5},{value:" \u4EE3\u66FF\u3002",paraId:19,tocIndex:5},{value:"\u79FB\u9664 ",paraId:20,tocIndex:6},{value:"locale-provider",paraId:20,tocIndex:6},{value:" \u76EE\u5F55\u3002",paraId:20,tocIndex:6},{value:"LocaleProvider",paraId:20,tocIndex:6},{value:" \u5728 v4 \u4E2D\u5DF2\u79FB\u9664\uFF0C\u8BF7\u4F7F\u7528 ",paraId:20,tocIndex:6},{value:"ConfigProvider",paraId:20,tocIndex:6},{value:" \u66FF\u4EE3\u3002",paraId:20,tocIndex:6},{value:"\u79FB\u9664 Comment \u7EC4\u4EF6\uFF0C\u79FB\u81F3 ",paraId:21,tocIndex:6},{value:"@ant-design/compatible",paraId:21,tocIndex:6},{value:" \u4E2D\u7EF4\u62A4\u3002",paraId:21,tocIndex:6},{value:"\u79FB\u9664 PageHeader \u7EC4\u4EF6\uFF0C\u79FB\u81F3 ",paraId:22,tocIndex:6},{value:"@ant-design/pro-components",paraId:22,tocIndex:6},{value:" \u4E2D\u7EF4\u62A4\u3002",paraId:22,tocIndex:6},{value:"- import { PageHeader, Comment } from 'antd';\n+ import { Comment } from '@ant-design/compatible';\n+ import { PageHeader } from '@ant-design/pro-components';\n  // \u5982\u679C\u662F\u8682\u8681\u5185\u7F51\u7528\u6237\u5EFA\u8BAE\u4ECE @alipay/tech-ui \u5F15\u5165\n  // import { PageHeader } from '@alipay/tech-ui';\n\n  const App: React.FC = () => (\n    <>\n      <PageHeader />\n      <Comment />\n    </>\n  );\n\n  export default App;\n",paraId:23,tocIndex:6},{value:"BackTop \u7EC4\u4EF6\u5728 ",paraId:24,tocIndex:6},{value:"5.0.0",paraId:24,tocIndex:6},{value:" \u4E2D\u5E9F\u5F03\uFF0C\u79FB\u81F3 FloatButton \u60AC\u6D6E\u6309\u94AE\u4E2D\u3002\u5982\u9700\u4F7F\u7528\uFF0C\u53EF\u4EE5\u4ECE FloatButton \u4E2D\u5F15\u5165\u3002",paraId:24,tocIndex:6},{value:"- import { BackTop } from 'antd';\n+ import { FloatButton } from 'antd';\n\n  const App: React.FC = () => (\n    <>\n-     <BackTop />\n+     <FloatButton.BackTop />\n    </>\n  );\n\n  export default App;\n",paraId:25,tocIndex:6},{value:"\u901A\u8FC7 git \u4FDD\u5B58\u4F60\u7684\u4EE3\u7801\uFF0C\u7136\u540E\u6309\u7167\u4E0A\u8FF0\u6587\u6863\u8FDB\u884C\u4F9D\u8D56\u5B89\u88C5\uFF1A",paraId:26,tocIndex:7},{value:"npm install --save antd@5.x\n",paraId:27,tocIndex:7},{value:"\u5982\u679C\u4F60\u9700\u8981\u4F7F\u7528 v4 \u5E9F\u5F03\u7EC4\u4EF6\u5982 ",paraId:28,tocIndex:7},{value:"Comment",paraId:28,tocIndex:7},{value:"\u3001",paraId:28,tocIndex:7},{value:"PageHeader",paraId:28,tocIndex:7},{value:"\uFF0C\u8BF7\u5B89\u88C5 ",paraId:28,tocIndex:7},{value:"@ant-design/compatible",paraId:28,tocIndex:7},{value:" \u4E0E ",paraId:28,tocIndex:7},{value:"@ant-design/pro-components",paraId:28,tocIndex:7},{value:" \u505A\u517C\u5BB9\uFF1A",paraId:28,tocIndex:7},{value:"npm install --save @ant-design/compatible@v5-compatible-v4\nnpm install --save @ant-design/pro-components\n",paraId:29,tocIndex:7},{value:"\u4F60\u53EF\u4EE5\u624B\u52A8\u5BF9\u7167\u4E0A\u9762\u7684\u5217\u8868\u9010\u6761\u68C0\u67E5\u4EE3\u7801\u8FDB\u884C\u4FEE\u6539\uFF0C\u53E6\u5916\uFF0C\u6211\u4EEC\u4E5F\u63D0\u4F9B\u4E86\u4E00\u4E2A codemod cli \u5DE5\u5177 ",paraId:30,tocIndex:7},{value:"@ant-design/codemod-v5",paraId:30,tocIndex:7},{value:" \u4EE5\u5E2E\u52A9\u4F60\u5FEB\u901F\u5347\u7EA7\u5230 v5 \u7248\u672C\u3002",paraId:30,tocIndex:7},{value:"\u5728\u8FD0\u884C codemod cli \u524D\uFF0C\u8BF7\u5148\u63D0\u4EA4\u4F60\u7684\u672C\u5730\u4EE3\u7801\u4FEE\u6539\u3002",paraId:31,tocIndex:7},{value:"# \u4F7F\u7528 npx \u76F4\u63A5\u8FD0\u884C\nnpx -p @ant-design/codemod-v5 antd5-codemod src\n\n# \u6216\u8005\u4F7F\u7528 pnpm \u76F4\u63A5\u8FD0\u884C\npnpm --package=@ant-design/codemod-v5 dlx antd5-codemod src\n",paraId:32,tocIndex:7},{value:"\n  ",paraId:33},{value:"\n  ",paraId:33},{value:"\u6CE8\u610F codemod \u4E0D\u80FD\u6DB5\u76D6\u6240\u6709\u573A\u666F\uFF0C\u5EFA\u8BAE\u8FD8\u662F\u8981\u6309\u4E0D\u517C\u5BB9\u7684\u53D8\u5316\u9010\u6761\u6392\u67E5\u3002",paraId:34,tocIndex:7},{value:"\u5982\u679C\u4F60\u4F7F\u7528\u5230\u4E86 antd \u7684 less \u53D8\u91CF\uFF0C\u901A\u8FC7\u517C\u5BB9\u5305\u5C06 v5 \u53D8\u91CF\u8F6C\u8BD1\u6210 v4 \u7248\u672C\uFF0C\u5E76\u901A\u8FC7 less-loader \u6CE8\u5165\uFF1A",paraId:35,tocIndex:8},{value:"const { theme } = require('antd/lib');\nconst { convertLegacyToken, defaultTheme } = require('@ant-design/compatible/lib');\n\nconst { defaultAlgorithm, defaultSeed } = theme;\n\nconst mapV5Token = defaultAlgorithm(defaultSeed);\nconst v5Vars = convertLegacyToken(mapV5Token);\nconst mapV4Token = theme.getDesignToken(defaultTheme);\nconst v4Vars = convertLegacyToken(mapV4Token);\n\n// Webpack Config\nmodule.exports = {\n  // ... other config\n  loader: 'less-loader',\n  options: {\n    lessOptions: {\n      modifyVars: v5Vars, // or v4Vars\n    },\n  },\n};\n",paraId:36,tocIndex:8},{value:"\u540C\u65F6\u79FB\u9664\u5BF9 antd less \u6587\u4EF6\u7684\u76F4\u63A5\u5F15\u7528\uFF1A",paraId:37,tocIndex:8},{value:"// Your less file\n--  @import (reference) '~antd/es/style/themes/index';\nor\n--  @import '~antd/es/style/some-other-less-file-ref';\n",paraId:38,tocIndex:8},{value:"\u4ECE package.json \u4E2D\u79FB\u9664 ",paraId:39,tocIndex:9},{value:"babel-plugin-import",paraId:39,tocIndex:9},{value:"\uFF0C\u5E76\u4ECE ",paraId:39,tocIndex:9},{value:".babelrc",paraId:39,tocIndex:9},{value:" \u79FB\u9664\u8BE5\u63D2\u4EF6\uFF1A",paraId:39,tocIndex:9},{value:'"plugins": [\n- ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"],\n]\n',paraId:40,tocIndex:9},{value:"Umi \u7528\u6237\u53EF\u4EE5\u5728\u914D\u7F6E\u6587\u4EF6\u4E2D\u5173\u95ED\uFF1A",paraId:41,tocIndex:9},{value:"// config/config.ts or .umirc\nexport default {\n  antd: {\n-   import: true,\n+   import: false,\n  },\n};\n",paraId:42,tocIndex:9},{value:"\u5C06 moment.js \u7684 locale \u66FF\u6362\u4E3A day.js \u7684 locale \u5F15\u5165\uFF1A",paraId:43,tocIndex:10},{value:"-   import moment from 'moment';\n+   import dayjs from 'dayjs';\n-   import 'moment/locale/zh-cn';\n+   import 'dayjs/locale/zh-cn';\n\n-   moment.locale('zh-cn');\n+   dayjs.locale('zh-cn');\n",paraId:44,tocIndex:10},{value:"\u{1F6A8} \u9700\u8981\u6CE8\u610F day.js \u901A\u8FC7\u63D2\u4EF6\u7CFB\u7EDF\u62D3\u5C55\u529F\u80FD\u3002\u5982\u679C\u4F60\u53D1\u73B0\u539F\u672C moment.js \u7684\u529F\u80FD\u5728 day.js \u4E2D\u65E0\u6CD5\u4F7F\u7528\uFF0C\u8BF7\u67E5\u9605 ",paraId:45,tocIndex:10},{value:"day.js \u5B98\u65B9\u6587\u6863",paraId:45,tocIndex:10},{value:"\u3002",paraId:45,tocIndex:10},{value:"\u5982\u679C\u4F60\u6682\u65F6\u4E0D\u60F3\u66FF\u6362 day.js\uFF0C\u4E5F\u53EF\u4EE5\u4F7F\u7528 ",paraId:46,tocIndex:10},{value:"@ant-design/moment-webpack-plugin",paraId:46,tocIndex:10},{value:" \u63D2\u4EF6\u5C06 day.js \u66FF\u6362\u56DE moment.js\uFF1A",paraId:46,tocIndex:10},{value:"npm install --save-dev @ant-design/moment-webpack-plugin\n",paraId:47,tocIndex:10},{value:"// webpack-config.js\nimport AntdMomentWebpackPlugin from '@ant-design/moment-webpack-plugin';\n\nmodule.exports = {\n  // ...\n  plugins: [new AntdMomentWebpackPlugin()],\n};\n",paraId:48,tocIndex:10},{value:"\u5982\u679C\u4F60\u4E0D\u5E0C\u671B\u6837\u5F0F\u5728\u5347\u7EA7\u540E\u53D1\u751F\u53D8\u5316\uFF0C\u6211\u4EEC\u5728\u517C\u5BB9\u5305\u4E2D\u63D0\u4F9B\u4E86\u5B8C\u6574\u7684 V4 \u4E3B\u9898\uFF0C\u53EF\u4EE5\u8FD8\u539F\u5230 V4 \u7684\u6837\u5F0F\u3002",paraId:49,tocIndex:11},{value:"const sandpackConfig = {\n  dependencies: {\n    '@ant-design/compatible': 'v5-compatible-v4',\n  },\n};\n\nimport {\n  defaultTheme,   // \u9ED8\u8BA4\u4E3B\u9898\n  darkTheme,      // \u6697\u8272\u4E3B\u9898\n} from '@ant-design/compatible';\nimport { ConfigProvider, Button, Radio, Space } from 'antd';\n\nexport default () => (\n  <ConfigProvider theme={defaultTheme}>\n    <Space direction=\"vertical\">\n      <Button type=\"primary\">Button</Button>\n      <Radio.Group>\n        <Radio value={1}>A</Radio>\n        <Radio value={2}>B</Radio>\n        <Radio value={3}>C</Radio>\n        <Radio value={4}>D</Radio>\n      </Radio.Group>\n    </Space>\n  </ConfigProvider>\n);\n",paraId:50,tocIndex:11},{value:"Ant Design v5 \u4F7F\u7528 ",paraId:51,tocIndex:12},{value:":where",paraId:51,tocIndex:12},{value:" css selector \u964D\u4F4E CSS-in-JS hash \u503C\u4F18\u5148\u7EA7\uFF0C\u5982\u679C\u4F60\u9700\u8981\u652F\u6301\u65E7\u7248\u672C\u6D4F\u89C8\u5668\uFF08\u5982 IE 11\u3001360 \u6D4F\u89C8\u5668 \u7B49\u7B49\uFF09\u3002\u53EF\u4EE5\u901A\u8FC7 ",paraId:51,tocIndex:12},{value:"@ant-design/cssinjs",paraId:51,tocIndex:12},{value:" \u7684 ",paraId:51,tocIndex:12},{value:"StyleProvider",paraId:51,tocIndex:12},{value:" \u53BB\u9664\u964D\u6743\u64CD\u4F5C\u3002\u8BE6\u60C5\u8BF7\u53C2\u9605 ",paraId:51,tocIndex:12},{value:"\u517C\u5BB9\u6027\u8C03\u6574",paraId:52,tocIndex:12},{value:"\u3002",paraId:51,tocIndex:12},{value:"\u4E00\u822C\u60C5\u51B5\u4E0B\uFF0C\u5E76\u4E0D\u63A8\u8350\u591A\u7248\u672C\u5171\u5B58\uFF0C\u5B83\u4F1A\u8BA9\u5E94\u7528\u53D8\u5F97\u590D\u6742\uFF08\u4F8B\u5982\u6837\u5F0F\u8986\u76D6\u3001ConfigProvider \u4E0D\u590D\u7528\u7B49\u95EE\u9898\uFF09\u3002\u6211\u4EEC\u66F4\u63A8\u8350\u4F7F\u7528\u5FAE\u5E94\u7528\u5982 ",paraId:53,tocIndex:13},{value:"qiankun",paraId:53,tocIndex:13},{value:" \u7B49\u6846\u67B6\u8FDB\u884C\u5206\u9875\u7814\u53D1\u3002",paraId:53,tocIndex:13},{value:"$ npm install --save antd-v5@npm:antd@5\n# or\n$ yarn add antd-v5@npm:antd@5\n# or\n$ pnpm add antd-v5@npm:antd@5\n",paraId:54,tocIndex:14},{value:"\u5BF9\u5E94\u7684 package.json \u4E3A\uFF1A",paraId:55,tocIndex:14},{value:'{\n  "antd": "4.x",\n  "antd-v5": "npm:antd@5"\n}\n',paraId:56,tocIndex:14},{value:"\u73B0\u5728\uFF0C\u4F60\u9879\u76EE\u4E2D\u7684 antd \u8FD8\u662F v4 \u7248\u672C\uFF0Cantd-v5 \u662F v5 \u7248\u672C\u3002",paraId:57,tocIndex:14},{value:"import React from 'react';\nimport { Button as Button4 } from 'antd'; // v4\nimport { Button as Button5 } from 'antd-v5'; // v5\n\nexport default () => (\n  <>\n    <Button4 />\n    <Button5 />\n  </>\n);\n",paraId:58,tocIndex:14},{value:"\u63A5\u7740\u914D\u7F6E ConfigProvider \u5C06 v5 ",paraId:59,tocIndex:14},{value:"prefixCls",paraId:59,tocIndex:14},{value:" \u6539\u5199\uFF0C\u9632\u6B62\u6837\u5F0F\u51B2\u7A81\uFF1A",paraId:59,tocIndex:14},{value:"import React from 'react';\nimport { ConfigProvider as ConfigProvider5 } from 'antd-v5';\n\nexport default () => (\n  <ConfigProvider5 prefixCls=\"ant5\">\n    <MyApp />\n  </ConfigProvider5>\n);\n",paraId:60,tocIndex:14},{value:"\u9700\u8981\u6CE8\u610F\u7684\u662F\uFF0Cnpm \u522B\u540D\u5E76\u4E0D\u662F\u6240\u6709\u7684\u5305\u7BA1\u7406\u5668\u90FD\u6709\u5F88\u597D\u7684\u652F\u6301\u3002",paraId:61,tocIndex:14},{value:"\u5982\u679C\u60A8\u5728\u5347\u7EA7\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u95EE\u9898\uFF0C\u8BF7\u5230 ",paraId:62,tocIndex:15},{value:"GitHub issues",paraId:62,tocIndex:15},{value:" \u8FDB\u884C\u53CD\u9988\u3002\u6211\u4EEC\u4F1A\u5C3D\u5FEB\u54CD\u5E94\u548C\u76F8\u5E94\u6539\u8FDB\u8FD9\u7BC7\u6587\u6863\u3002",paraId:62,tocIndex:15}];}}]);