ant-design/6f8d2410-async.743a2c1a.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["6f8d2410"],{"6f8d2410":function(e,n,a){"use strict";a.d(n,"__esModule",{value:!0}),a.d(n,"texts",{enumerable:!0,get:function(){return o;}}),a("93c21cbe");let o=[{value:"Ant Design \u8BBE\u8BA1\u89C4\u8303\u548C\u6280\u672F\u4E0A\u652F\u6301\u7075\u6D3B\u7684\u6837\u5F0F\u5B9A\u5236\uFF0C\u4EE5\u6EE1\u8DB3\u4E1A\u52A1\u548C\u54C1\u724C\u4E0A\u591A\u6837\u5316\u7684\u89C6\u89C9\u9700\u6C42\uFF0C\u5305\u62EC\u4F46\u4E0D\u9650\u4E8E\u5168\u5C40\u6837\u5F0F\uFF08\u4E3B\u8272\u3001\u5706\u89D2\u3001\u8FB9\u6846\uFF09\u548C\u6307\u5B9A\u7EC4\u4EF6\u7684\u89C6\u89C9\u5B9A\u5236\u3002",paraId:0},{value:"\u5728 5.0 \u7248\u672C\u7684 Ant Design \u4E2D\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E00\u5957\u5168\u65B0\u7684\u5B9A\u5236\u4E3B\u9898\u65B9\u6848\u3002\u4E0D\u540C\u4E8E 4.x \u7248\u672C\u7684 less \u548C CSS \u53D8\u91CF\uFF0C\u6709\u4E86 CSS-in-JS \u7684\u52A0\u6301\u540E\uFF0C\u52A8\u6001\u4E3B\u9898\u7684\u80FD\u529B\u4E5F\u5F97\u5230\u4E86\u52A0\u5F3A\uFF0C\u5305\u62EC\u4F46\u4E0D\u9650\u4E8E\uFF1A",paraId:1},{value:"\u652F\u6301\u52A8\u6001\u5207\u6362\u4E3B\u9898\uFF1B",paraId:2},{value:"\u652F\u6301\u540C\u65F6\u5B58\u5728\u591A\u4E2A\u4E3B\u9898\uFF1B",paraId:2},{value:"\u652F\u6301\u9488\u5BF9\u67D0\u4E2A/\u67D0\u4E9B\u7EC4\u4EF6\u4FEE\u6539\u4E3B\u9898\u53D8\u91CF\uFF1B",paraId:2},{value:"...",paraId:2},{value:"\u5728 5.0 \u7248\u672C\u4E2D\u6211\u4EEC\u628A\u5F71\u54CD\u4E3B\u9898\u7684\u6700\u5C0F\u5143\u7D20\u79F0\u4E3A ",paraId:3,tocIndex:0},{value:"Design Token",paraId:3,tocIndex:0},{value:"\u3002\u901A\u8FC7\u4FEE\u6539 Design Token\uFF0C\u6211\u4EEC\u53EF\u4EE5\u5448\u73B0\u51FA\u5404\u79CD\u5404\u6837\u7684\u4E3B\u9898\u6216\u8005\u7EC4\u4EF6\u3002\u901A\u8FC7\u5728 ",paraId:3,tocIndex:0},{value:"ConfigProvider",paraId:3,tocIndex:0},{value:" \u4E2D\u4F20\u5165 ",paraId:3,tocIndex:0},{value:"theme",paraId:3,tocIndex:0},{value:" \u5C5E\u6027\uFF0C\u53EF\u4EE5\u914D\u7F6E\u4E3B\u9898\u3002\u5728\u5347\u7EA7 v5 \u540E\uFF0C\u5C06\u9ED8\u8BA4\u4F7F\u7528 v5 \u7684\u4E3B\u9898\u3002",paraId:3,tocIndex:0},{value:"ConfigProvider",paraId:4},{value:" \u5BF9 ",paraId:4},{value:"message.xxx",paraId:4},{value:"\u3001",paraId:4},{value:"Modal.xxx",paraId:4},{value:"\u3001",paraId:4},{value:"notification.xxx",paraId:4},{value:" \u7B49\u9759\u6001\u65B9\u6CD5\u4E0D\u4F1A\u751F\u6548\uFF0C\u539F\u56E0\u662F\u5728\u8FD9\u4E9B\u65B9\u6CD5\u4E2D\uFF0Cantd \u4F1A\u901A\u8FC7 ",paraId:4},{value:"ReactDOM.render",paraId:4},{value:" \u52A8\u6001\u521B\u5EFA\u65B0\u7684 React \u5B9E\u4F53\u3002\u5176 context \u4E0E\u5F53\u524D\u4EE3\u7801\u6240\u5728 context \u5E76\u4E0D\u76F8\u540C\uFF0C\u56E0\u800C\u65E0\u6CD5\u83B7\u53D6 context \u4FE1\u606F\u3002",paraId:4},{value:"\u5F53\u4F60\u9700\u8981 context \u4FE1\u606F\uFF08\u4F8B\u5982 ConfigProvider \u914D\u7F6E\u7684\u5185\u5BB9\uFF09\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 ",paraId:5},{value:"Modal.useModal",paraId:5},{value:" \u65B9\u6CD5\u8FD4\u56DE modal \u5B9E\u4F53\u4EE5\u53CA contextHolder \u8282\u70B9\uFF0C\u5C06\u5176\u63D2\u5165\u5230\u4F60\u9700\u8981\u83B7\u53D6 context \u4F4D\u7F6E\u5373\u53EF\u3002\u4E5F\u53EF\u901A\u8FC7 ",paraId:5},{value:"App \u5305\u88F9\u7EC4\u4EF6",paraId:6},{value:" \u7B80\u5316 useModal \u7B49\u65B9\u6CD5\u9700\u8981\u624B\u52A8\u690D\u5165 contextHolder \u7684\u95EE\u9898\u3002",paraId:5},{value:"\u901A\u8FC7 ",paraId:7,tocIndex:1},{value:"theme",paraId:7,tocIndex:1},{value:" \u4E2D\u7684 ",paraId:7,tocIndex:1},{value:"token",paraId:7,tocIndex:1},{value:" \u5C5E\u6027\uFF0C\u53EF\u4EE5\u4FEE\u6539\u4E00\u4E9B\u4E3B\u9898\u53D8\u91CF\u3002\u90E8\u5206\u4E3B\u9898\u53D8\u91CF\u4F1A\u5F15\u8D77\u5176\u4ED6\u4E3B\u9898\u53D8\u91CF\u7684\u53D8\u5316\uFF0C\u6211\u4EEC\u628A\u8FD9\u4E9B\u4E3B\u9898\u53D8\u91CF\u79F0\u4E3A Seed Token\u3002",paraId:7,tocIndex:1},{value:"const sandpackConfig = {\n  autorun: true,\n};\n\nimport { Button, ConfigProvider, Space } from 'antd';\nimport React from 'react';\n\nconst App: React.FC = () => (\n  <ConfigProvider\n    theme={{\n      token: {\n        // Seed Token\uFF0C\u5F71\u54CD\u8303\u56F4\u5927\n        colorPrimary: '#00b96b',\n        borderRadius: 2,\n\n        // \u6D3E\u751F\u53D8\u91CF\uFF0C\u5F71\u54CD\u8303\u56F4\u5C0F\n        colorBgContainer: '#f6ffed',\n      },\n    }}\n  >\n    <Space>\n      <Button type=\"primary\">Primary</Button>\n      <Button>Default</Button>\n    </Space>\n  </ConfigProvider>\n);\n\nexport default App;\n",paraId:8,tocIndex:1},{value:"\u901A\u8FC7\u4FEE\u6539\u7B97\u6CD5\u53EF\u4EE5\u5FEB\u901F\u751F\u6210\u98CE\u683C\u8FE5\u5F02\u7684\u4E3B\u9898\uFF0C5.0 \u7248\u672C\u4E2D\u9ED8\u8BA4\u63D0\u4F9B\u4E09\u5957\u9884\u8BBE\u7B97\u6CD5\uFF0C\u5206\u522B\u662F:",paraId:9,tocIndex:2},{value:"\u9ED8\u8BA4\u7B97\u6CD5 ",paraId:10,tocIndex:2},{value:"theme.defaultAlgorithm",paraId:10,tocIndex:2},{value:"\u6697\u8272\u7B97\u6CD5 ",paraId:10,tocIndex:2},{value:"theme.darkAlgorithm",paraId:10,tocIndex:2},{value:"\u7D27\u51D1\u7B97\u6CD5 ",paraId:10,tocIndex:2},{value:"theme.compactAlgorithm",paraId:10,tocIndex:2},{value:"\u4F60\u53EF\u4EE5\u901A\u8FC7 ",paraId:11,tocIndex:2},{value:"theme",paraId:11,tocIndex:2},{value:" \u4E2D\u7684 ",paraId:11,tocIndex:2},{value:"algorithm",paraId:11,tocIndex:2},{value:" \u5C5E\u6027\u6765\u5207\u6362\u7B97\u6CD5\uFF0C\u5E76\u4E14\u652F\u6301\u914D\u7F6E\u591A\u79CD\u7B97\u6CD5\uFF0C\u5C06\u4F1A\u4F9D\u6B21\u751F\u6548\u3002",paraId:11,tocIndex:2},{value:"const sandpackConfig = {\n  dark: true,\n};\n\nimport React from 'react';\nimport { Button, ConfigProvider, Input, Space, theme } from 'antd';\n\nconst App: React.FC = () => (\n  <ConfigProvider\n    theme={{\n      // 1. \u5355\u72EC\u4F7F\u7528\u6697\u8272\u7B97\u6CD5\n      algorithm: theme.darkAlgorithm,\n\n      // 2. \u7EC4\u5408\u4F7F\u7528\u6697\u8272\u7B97\u6CD5\u4E0E\u7D27\u51D1\u7B97\u6CD5\n      // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],\n    }}\n  >\n    <Space>\n      <Input placeholder=\"Please Input\" />\n      <Button type=\"primary\">Submit</Button>\n    </Space>\n  </ConfigProvider>\n);\n\nexport default App;\n",paraId:12,tocIndex:2},{value:"\u9664\u4E86\u6574\u4F53\u7684 Design Token\uFF0C\u5404\u4E2A\u7EC4\u4EF6\u4E5F\u4F1A\u5F00\u653E\u81EA\u5DF1\u7684 Component Token \u6765\u5B9E\u73B0\u9488\u5BF9\u7EC4\u4EF6\u7684\u6837\u5F0F\u5B9A\u5236\u80FD\u529B\uFF0C\u4E0D\u540C\u7684\u7EC4\u4EF6\u4E4B\u95F4\u4E0D\u4F1A\u76F8\u4E92\u5F71\u54CD\u3002\u540C\u6837\u5730\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7\u8FD9\u79CD\u65B9\u5F0F\u6765\u8986\u76D6\u7EC4\u4EF6\u7684\u5176\u4ED6 Design Token\u3002",paraId:13,tocIndex:3},{value:"\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u6240\u6709\u7EC4\u4EF6\u53D8\u91CF\u90FD\u4EC5\u4EC5\u662F\u8986\u76D6\uFF0C\u4E0D\u4F1A\u57FA\u4E8E Seed Token \u8BA1\u7B97\u6D3E\u751F\u53D8\u91CF\u3002",paraId:14},{value:"\u5728 ",paraId:15},{value:">= 5.8.0",paraId:15},{value:" \u7248\u672C\u4E2D\uFF0C\u7EC4\u4EF6\u53D8\u91CF\u652F\u6301\u4F20\u5165 ",paraId:15},{value:"algorithm",paraId:15},{value:" \u5C5E\u6027\uFF0C\u53EF\u4EE5\u5F00\u542F\u6D3E\u751F\u8BA1\u7B97\u6216\u8005\u4F20\u5165\u5176\u4ED6\u7B97\u6CD5\u3002",paraId:15},{value:"import React from 'react';\nimport { ConfigProvider, Button, Space, Input, Divider } from 'antd';\n\nconst App: React.FC = () => (\n  <>\n    <ConfigProvider\n      theme={{\n        components: {\n          Button: {\n            colorPrimary: '#00b96b',\n            algorithm: true, // \u542F\u7528\u7B97\u6CD5\n          },\n          Input: {\n            colorPrimary: '#eb2f96',\n            algorithm: true, // \u542F\u7528\u7B97\u6CD5\n          }\n        },\n      }}\n    >\n      <Space>\n        <div style={{ fontSize: 14 }}>\u5F00\u542F\u7B97\u6CD5\uFF1A</div>\n        <Input placeholder=\"Please Input\" />\n        <Button type=\"primary\">Submit</Button>\n      </Space>\n    </ConfigProvider>\n    <Divider />\n    <ConfigProvider\n      theme={{\n        components: {\n          Button: {\n            colorPrimary: '#00b96b',\n          },\n          Input: {\n            colorPrimary: '#eb2f96',\n          }\n        },\n      }}\n    >\n      <Space>\n        <div style={{ fontSize: 14 }}>\u7981\u7528\u7B97\u6CD5\uFF1A</div>\n        <Input placeholder=\"Please Input\" />\n        <Button type=\"primary\">Submit</Button>\n      </Space>\n    </ConfigProvider>\n  </>\n);\n\nexport default App;\n",paraId:16},{value:"antd \u9ED8\u8BA4\u5185\u7F6E\u4E86\u4E00\u4E9B\u7EC4\u4EF6\u4EA4\u4E92\u52A8\u6548\u8BA9\u4F01\u4E1A\u7EA7\u9875\u9762\u66F4\u52A0\u5BCC\u6709\u7EC6\u8282\uFF0C\u5728\u4E00\u4E9B\u6781\u7AEF\u573A\u666F\u53EF\u80FD\u4F1A\u5F71\u54CD\u9875\u9762\u4EA4\u4E92\u6027\u80FD\uFF0C\u5982\u9700\u5173\u95ED\u52A8\u753B\u53EF\u4EE5 ",paraId:17,tocIndex:4},{value:"token",paraId:17,tocIndex:4},{value:" \u4E2D\u7684 ",paraId:17,tocIndex:4},{value:"motion",paraId:17,tocIndex:4},{value:" \u4FEE\u6539\u4E3A ",paraId:17,tocIndex:4},{value:"false",paraId:17,tocIndex:4},{value:"\uFF1A",paraId:17,tocIndex:4},{value:"import React from 'react';\nimport { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd';\n\nconst App: React.FC = () => {\n  const [checked, setChecked] = React.useState<boolean>(false);\n  const timerRef = React.useRef<ReturnType<typeof setInterval>>();\n  React.useEffect(() => {\n    timerRef.current = setInterval(() => {\n      setChecked((prev) => !prev);\n    }, 500);\n    return () => {\n      if (timerRef.current) {\n        clearInterval(timerRef.current);\n      }\n    };\n  }, []);\n\n  const nodes = (\n    <Flex gap=\"small\">\n      <Checkbox checked={checked}>Checkbox</Checkbox>\n      <Radio checked={checked}>Radio</Radio>\n      <Switch checked={checked} />\n    </Flex>\n  );\n\n  return (\n    <Row gutter={[24, 24]}>\n      <Col span={24}>{nodes}</Col>\n      <Col span={24}>\n        <ConfigProvider theme={{ token: { motion: false } }}>{nodes}</ConfigProvider>\n      </Col>\n    </Row>\n  );\n};\n\nexport default App;\n",paraId:18,tocIndex:4},{value:"\u5728 v5 \u4E2D\uFF0C\u52A8\u6001\u5207\u6362\u4E3B\u9898\u5BF9\u7528\u6237\u6765\u8BF4\u662F\u975E\u5E38\u7B80\u5355\u7684\uFF0C\u4F60\u53EF\u4EE5\u5728\u4EFB\u4F55\u65F6\u5019\u901A\u8FC7 ",paraId:19,tocIndex:6},{value:"ConfigProvider",paraId:19,tocIndex:6},{value:" \u7684 ",paraId:19,tocIndex:6},{value:"theme",paraId:19,tocIndex:6},{value:" \u5C5E\u6027\u6765\u52A8\u6001\u5207\u6362\u4E3B\u9898\uFF0C\u800C\u4E0D\u9700\u8981\u4EFB\u4F55\u989D\u5916\u914D\u7F6E\u3002",paraId:19,tocIndex:6},{value:"import { Button, ConfigProvider, Space, Input, ColorPicker, Divider } from 'antd';\nimport React from 'react';\n\nconst App: React.FC = () => {\n  const [primary, setPrimary] = React.useState('#1677ff');\n\n  return (\n    <>\n      <ColorPicker showText value={primary} onChange={(color) => setPrimary(color.toHexString())} />\n      <Divider />\n      <ConfigProvider\n        theme={{\n          token: {\n            colorPrimary: primary,\n          },\n        }}\n      >\n        <Space>\n          <Input placeholder=\"Please Input\" />\n          <Button type=\"primary\">Submit</Button>\n        </Space>\n      </ConfigProvider>\n    </>\n  );\n}\n\nexport default App;\n",paraId:20,tocIndex:6},{value:"\u53EF\u4EE5\u5D4C\u5957\u4F7F\u7528 ",paraId:21,tocIndex:7},{value:"ConfigProvider",paraId:21,tocIndex:7},{value:" \u6765\u5B9E\u73B0\u5C40\u90E8\u4E3B\u9898\u7684\u66F4\u6362\u3002\u5728\u5B50\u4E3B\u9898\u4E2D\u672A\u88AB\u6539\u53D8\u7684 Design Token \u5C06\u4F1A\u7EE7\u627F\u7236\u4E3B\u9898\u3002",paraId:21,tocIndex:7},{value:"import React from 'react';\nimport { Button, ConfigProvider, Space } from 'antd';\n\nconst App: React.FC = () => (\n  <ConfigProvider\n    theme={{\n      token: {\n        colorPrimary: '#1677ff',\n      },\n    }}\n  >\n    <Space>\n      <Button type=\"primary\">Theme 1</Button>\n      <ConfigProvider\n        theme={{\n          token: {\n            colorPrimary: '#00b96b',\n          },\n        }}\n      >\n        <Button type=\"primary\">Theme 2</Button>\n      </ConfigProvider>\n    </Space>\n  </ConfigProvider>\n);\n\nexport default App;\n",paraId:22,tocIndex:7},{value:"\u5982\u679C\u4F60\u5E0C\u671B\u4F7F\u7528\u5F53\u524D\u4E3B\u9898\u4E0B\u7684 Design Token\uFF0C\u6211\u4EEC\u63D0\u4F9B\u4E86 ",paraId:23,tocIndex:8},{value:"useToken",paraId:23,tocIndex:8},{value:" \u8FD9\u4E2A hook \u6765\u83B7\u53D6 Design Token\u3002",paraId:23,tocIndex:8},{value:"import React from 'react';\nimport { Button, theme } from 'antd';\n\nconst { useToken } = theme;\n\nconst App: React.FC = () => {\n  const { token } = useToken();\n\n  return (\n    <div\n      style={{\n        backgroundColor: token.colorPrimaryBg,\n        padding: token.padding,\n        borderRadius: token.borderRadius,\n        color: token.colorPrimaryText,\n        fontSize: token.fontSize,\n      }}\n    >\n      \u4F7F\u7528 Design Token\n    </div>\n  );\n};\n\nexport default App;\n",paraId:24,tocIndex:8},{value:"\u5F53\u4F60\u9700\u8981\u975E React \u751F\u547D\u5468\u671F\u6D88\u8D39 Token \u53D8\u91CF\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u9759\u6001\u65B9\u6CD5 ",paraId:25,tocIndex:9},{value:"getDesignToken",paraId:25,tocIndex:9},{value:" \u5C06\u5176\u5BFC\u51FA\uFF1A",paraId:25,tocIndex:9},{value:"import { theme } from 'antd';\n\nconst { getDesignToken } = theme;\n\nconst globalToken = getDesignToken();\n",paraId:26,tocIndex:9},{value:"getDesignToken",paraId:27,tocIndex:9},{value:" \u548C ConfigProvider \u4E00\u6837\uFF0C\u652F\u6301\u4F20\u5165 ",paraId:27,tocIndex:9},{value:"theme",paraId:27,tocIndex:9},{value:" \u5C5E\u6027\uFF0C\u7528\u4E8E\u83B7\u53D6\u6307\u5B9A\u4E3B\u9898\u7684 Design Token\u3002",paraId:27,tocIndex:9},{value:"import type { ThemeConfig } from 'antd';\nimport { theme } from 'antd';\nimport { createRoot } from 'react-dom/client';\n\nconst { getDesignToken, useToken } = theme;\n\nconst config: ThemeConfig = {\n  token: {\n    colorPrimary: '#1890ff',\n  },\n};\n\n// \u901A\u8FC7\u9759\u6001\u65B9\u6CD5\u83B7\u53D6\nconst globalToken = getDesignToken(config);\n\n// \u901A\u8FC7 hook \u83B7\u53D6\nconst App = () => {\n  const { token } = useToken();\n  return null;\n};\n\n// \u6E32\u67D3\u793A\u610F\ncreateRoot(document.getElementById('#app')).render(\n  <ConfigProvider theme={config}>\n    <App />\n  </ConfigProvider>,\n);\n",paraId:28,tocIndex:9},{value:"\u5982\u679C\u9700\u8981\u5C06\u5176\u5E94\u7528\u5230\u9759\u6001\u6837\u5F0F\u7F16\u8BD1\u6846\u67B6\uFF0C\u5982 less \u53EF\u4EE5\u901A\u8FC7 less-loader \u6CE8\u5165\uFF1A",paraId:29,tocIndex:9},{value:'{\n  loader: "less-loader",\n  options: {\n    lessOptions: {\n      modifyVars: mapToken,\n    },\n  },\n}\n',paraId:30,tocIndex:9},{value:"\u517C\u5BB9\u5305\u63D0\u4F9B\u4E86\u53D8\u91CF\u8F6C\u6362\u65B9\u6CD5\u7528\u4E8E\u8F6C\u6210 v4 \u7684 less \u53D8\u91CF\uFF0C\u5982\u9700\u4F7F\u7528",paraId:31,tocIndex:9},{value:"\u70B9\u51FB\u6B64\u5904",paraId:32,tocIndex:9},{value:"\u67E5\u770B\u8BE6\u60C5\u3002",paraId:31,tocIndex:9},{value:"\u6211\u4EEC\u63D0\u4F9B\u4E86\u5E2E\u52A9\u7528\u6237\u8C03\u8BD5\u4E3B\u9898\u7684\u5DE5\u5177\uFF1A",paraId:33,tocIndex:10},{value:"\u4E3B\u9898\u7F16\u8F91\u5668",paraId:34,tocIndex:10},{value:"\u4F60\u53EF\u4EE5\u4F7F\u7528\u6B64\u5DE5\u5177\u81EA\u7531\u5730\u4FEE\u6539 Design Token\uFF0C\u4EE5\u8FBE\u5230\u4F60\u5BF9\u4E3B\u9898\u7684\u671F\u671B\u3002",paraId:35,tocIndex:10},{value:"\u5728 Design Token \u4E2D\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E00\u5957\u66F4\u52A0\u8D34\u5408\u8BBE\u8BA1\u7684\u4E09\u5C42\u7ED3\u6784\uFF0C\u5C06 Design Token \u62C6\u89E3\u4E3A Seed Token\u3001Map Token \u548C Alias Token \u4E09\u90E8\u5206\u3002\u8FD9\u4E09\u7EC4 Token \u5E76\u4E0D\u662F\u7B80\u5355\u7684\u5206\u7EC4\uFF0C\u800C\u662F\u4E00\u4E2A\u4E09\u5C42\u7684\u6D3E\u751F\u5173\u7CFB\uFF0C\u7531 Seed Token \u6D3E\u751F Map Token\uFF0C\u518D\u7531 Map Token \u6D3E\u751F Alias Token\u3002\u5728\u5927\u90E8\u5206\u60C5\u51B5\u4E0B\uFF0C\u4F7F\u7528 Seed Token \u5C31\u53EF\u4EE5\u6EE1\u8DB3\u5B9A\u5236\u4E3B\u9898\u7684\u9700\u8981\u3002\u4F46\u5982\u679C\u60A8\u9700\u8981\u66F4\u9AD8\u7A0B\u5EA6\u7684\u4E3B\u9898\u5B9A\u5236\uFF0C\u60A8\u9700\u8981\u4E86\u89E3 antd \u4E2D Design Token \u7684\u751F\u547D\u5468\u671F\u3002",paraId:36,tocIndex:11},{value:"Seed Token \u610F\u5473\u7740\u6240\u6709\u8BBE\u8BA1\u610F\u56FE\u7684\u8D77\u6E90\u3002\u6BD4\u5982\u6211\u4EEC\u53EF\u4EE5\u901A\u8FC7\u6539\u53D8 ",paraId:37,tocIndex:13},{value:"colorPrimary",paraId:37,tocIndex:13},{value:" \u6765\u6539\u53D8\u4E3B\u9898\u8272\uFF0Cantd \u5185\u90E8\u7684\u7B97\u6CD5\u4F1A\u81EA\u52A8\u7684\u6839\u636E Seed Token \u8BA1\u7B97\u51FA\u5BF9\u5E94\u7684\u4E00\u7CFB\u5217\u989C\u8272\u5E76\u5E94\u7528\uFF1A",paraId:37,tocIndex:13},{value:"const theme = {\n  token: {\n    colorPrimary: '#1890ff',\n  },\n};\n",paraId:38,tocIndex:13},{value:"Map Token \u662F\u57FA\u4E8E Seed \u6D3E\u751F\u7684\u68AF\u5EA6\u53D8\u91CF\u3002\u5B9A\u5236 Map Token \u63A8\u8350\u901A\u8FC7 ",paraId:39,tocIndex:14},{value:"theme.algorithm",paraId:39,tocIndex:14},{value:" \u6765\u5B9E\u73B0\uFF0C\u8FD9\u6837\u53EF\u4EE5\u4FDD\u8BC1 Map Token \u4E4B\u95F4\u7684\u68AF\u5EA6\u5173\u7CFB\u3002\u4E5F\u53EF\u4EE5\u901A\u8FC7 ",paraId:39,tocIndex:14},{value:"theme.token",paraId:39,tocIndex:14},{value:" \u8986\u76D6\uFF0C\u7528\u4E8E\u5355\u72EC\u4FEE\u6539\u4E00\u4E9B map token \u7684\u503C\u3002",paraId:39,tocIndex:14},{value:"const theme = {\n  token: {\n    colorPrimaryBg: '#e6f7ff',\n  },\n};\n",paraId:40,tocIndex:14},{value:"Alias Token \u7528\u4E8E\u6279\u91CF\u63A7\u5236\u67D0\u4E9B\u5171\u6027\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u57FA\u672C\u4E0A\u662F Map Token \u522B\u540D\uFF0C\u6216\u8005\u7279\u6B8A\u5904\u7406\u8FC7\u7684 Map Token\u3002",paraId:41,tocIndex:15},{value:"const theme = {\n  token: {\n    colorLink: '#1890ff',\n  },\n};\n",paraId:42,tocIndex:15},{value:"\u57FA\u672C\u7B97\u6CD5\u7528\u4E8E\u5C06 Seed Token \u5C55\u5F00\u4E3A Map Token\uFF0C\u6BD4\u5982\u7531\u4E00\u4E2A\u57FA\u672C\u8272\u7B97\u51FA\u4E00\u4E2A\u68AF\u5EA6\u8272\u677F\uFF0C\u6216\u8005\u7531\u4E00\u4E2A\u57FA\u672C\u7684\u5706\u89D2\u7B97\u51FA\u5404\u79CD\u5927\u5C0F\u7684\u5706\u89D2\u3002\u7B97\u6CD5\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u4EFB\u610F\u5730\u7EC4\u5408\u4F7F\u7528\uFF0C\u6BD4\u5982\u53EF\u4EE5\u5C06\u6697\u8272\u7B97\u6CD5\u548C\u7D27\u51D1\u7B97\u6CD5\u7EC4\u5408\u4F7F\u7528\uFF0C\u5F97\u5230\u4E00\u4E2A\u6697\u8272\u548C\u7D27\u51D1\u76F8\u7ED3\u5408\u7684\u4E3B\u9898\u3002",paraId:43,tocIndex:16},{value:"import { theme } from 'antd';\n\nconst { darkAlgorithm, compactAlgorithm } = theme;\n\nconst theme = {\n  algorithm: [darkAlgorithm, compactAlgorithm],\n};\n",paraId:44,tocIndex:16},{value:"\u5C5E\u6027",paraId:45,tocIndex:18},{value:"\u8BF4\u660E",paraId:45,tocIndex:18},{value:"\u7C7B\u578B",paraId:45,tocIndex:18},{value:"\u9ED8\u8BA4\u503C",paraId:45,tocIndex:18},{value:"token",paraId:45,tocIndex:18},{value:"\u7528\u4E8E\u4FEE\u6539 Design Token",paraId:45,tocIndex:18},{value:"AliasToken",paraId:45,tocIndex:18},{value:"-",paraId:45,tocIndex:18},{value:"inherit",paraId:45,tocIndex:18},{value:"\u7EE7\u627F\u4E0A\u5C42 ConfigProvider \u4E2D\u914D\u7F6E\u7684\u4E3B\u9898\u3002",paraId:45,tocIndex:18},{value:"boolean",paraId:45,tocIndex:18},{value:"true",paraId:45,tocIndex:18},{value:"algorithm",paraId:45,tocIndex:18},{value:"\u7528\u4E8E\u4FEE\u6539 Seed Token \u5230 Map Token \u7684\u7B97\u6CD5",paraId:45,tocIndex:18},{value:"(token: SeedToken) => MapToken",paraId:45,tocIndex:18},{value:" | ",paraId:45,tocIndex:18},{value:"((token: SeedToken) => MapToken)[]",paraId:45,tocIndex:18},{value:"defaultAlgorithm",paraId:45,tocIndex:18},{value:"components",paraId:45,tocIndex:18},{value:"\u7528\u4E8E\u4FEE\u6539\u5404\u4E2A\u7EC4\u4EF6\u7684 Component Token \u4EE5\u53CA\u8986\u76D6\u8BE5\u7EC4\u4EF6\u6D88\u8D39\u7684 Alias Token",paraId:45,tocIndex:18},{value:"ComponentsConfig",paraId:45,tocIndex:18},{value:"-",paraId:45,tocIndex:18},{value:"cssVar",paraId:45,tocIndex:18},{value:"\u5F00\u542F CSS \u53D8\u91CF\uFF0C\u53C2\u8003",paraId:45,tocIndex:18},{value:"\u4F7F\u7528 CSS \u53D8\u91CF",paraId:46,tocIndex:18},{value:"boolean | { prefix?: string; key?: string }",paraId:45,tocIndex:18},{value:"false",paraId:45,tocIndex:18},{value:"hashed",paraId:45,tocIndex:18},{value:"\u7EC4\u4EF6 class Hash \u503C\uFF0C\u53C2\u8003",paraId:45,tocIndex:18},{value:"\u4F7F\u7528 CSS \u53D8\u91CF",paraId:47,tocIndex:18},{value:"boolean",paraId:45,tocIndex:18},{value:"true",paraId:45,tocIndex:18},{value:"\u5C5E\u6027",paraId:48,tocIndex:19},{value:"\u8BF4\u660E",paraId:48,tocIndex:19},{value:"\u7C7B\u578B",paraId:48,tocIndex:19},{value:"\u9ED8\u8BA4\u503C",paraId:48,tocIndex:19},{value:"Component",paraId:48,tocIndex:19},{value:" (\u53EF\u4EE5\u662F\u4EFB\u610F antd \u7EC4\u4EF6\u540D\uFF0C\u5982 ",paraId:48,tocIndex:19},{value:"Button",paraId:48,tocIndex:19},{value:")",paraId:48,tocIndex:19},{value:"\u7528\u4E8E\u4FEE\u6539 Component Token \u4EE5\u53CA\u8986\u76D6\u8BE5\u7EC4\u4EF6\u6D88\u8D39\u7684 Alias Token",paraId:48,tocIndex:19},{value:"ComponentToken & AliasToken & { algorithm: boolean | (token: SeedToken) => MapToken",paraId:48,tocIndex:19},{value:" | ",paraId:48,tocIndex:19},{value:"((token: SeedToken) => MapToken)[]}",paraId:48,tocIndex:19},{value:"-",paraId:48,tocIndex:19},{value:"\u7EC4\u4EF6\u7EA7\u522B\u7684 ",paraId:49,tocIndex:19},{value:"algorithm",paraId:49,tocIndex:19},{value:" \u9ED8\u8BA4\u4E3A ",paraId:49,tocIndex:19},{value:"false",paraId:49,tocIndex:19},{value:"\uFF0C\u6B64\u65F6\u7EC4\u4EF6 Token \u4EC5\u4EC5\u4F1A\u8986\u76D6\u8BE5\u7EC4\u4EF6\u4F7F\u7528\u7684 token\uFF0C\u4E0D\u4F1A\u8FDB\u884C\u6D3E\u751F\u8BA1\u7B97\u3002\u8BBE\u7F6E\u4E3A ",paraId:49,tocIndex:19},{value:"true",paraId:49,tocIndex:19},{value:" \u65F6\u4F1A\u7EE7\u627F\u5F53\u524D\u5168\u5C40\u7B97\u6CD5\uFF1B\u4E5F\u53EF\u4EE5\u548C\u5168\u5C40\u7684 ",paraId:49,tocIndex:19},{value:"algorithm",paraId:49,tocIndex:19},{value:" \u4E00\u6837\u4F20\u5165\u4E00\u4E2A\u6216\u591A\u4E2A\u7B97\u6CD5\uFF0C\u8FD9\u5C06\u4F1A\u9488\u5BF9\u8BE5\u7EC4\u4EF6\u8986\u76D6\u5168\u5C40\u7684\u7B97\u6CD5\u3002",paraId:49,tocIndex:19},{value:"\u7EE7\u627F\u6240\u6709 SeedToken \u7684\u5C5E\u6027",paraId:50,tocIndex:21},{value:"\u7EE7\u627F\u6240\u6709 SeedToken \u548C MapToken \u7684\u5C5E\u6027",paraId:51,tocIndex:22},{value:"theme",paraId:52},{value:"undefined",paraId:52},{value:"undefined",paraId:52},{value:"\u5728 ConfigProvider \u4E2D\u6211\u4EEC\u901A\u8FC7 ",paraId:53,tocIndex:24},{value:"DesignTokenContext",paraId:53,tocIndex:24},{value:" \u4F20\u9012 context\uFF0C",paraId:53,tocIndex:24},{value:"theme",paraId:53,tocIndex:24},{value:" \u4E3A ",paraId:53,tocIndex:24},{value:"undefined",paraId:53,tocIndex:24},{value:" \u65F6\u4E0D\u4F1A\u5957\u4E00\u5C42 Provider\uFF0C\u6240\u4EE5\u4ECE\u65E0\u5230\u6709\u6216\u8005\u4ECE\u6709\u5230\u65E0\u65F6 React \u7684 VirtualDOM \u7ED3\u6784\u53D8\u5316\uFF0C\u5BFC\u81F4\u7EC4\u4EF6\u91CD\u65B0 mount\u3002\u89E3\u51B3\u65B9\u6CD5\uFF1A\u5C06 ",paraId:53,tocIndex:24},{value:"undefined",paraId:53,tocIndex:24},{value:" \u66FF\u6362\u4E3A\u7A7A\u5BF9\u8C61 ",paraId:53,tocIndex:24},{value:"{}",paraId:53,tocIndex:24},{value:" \u5373\u53EF\u3002",paraId:53,tocIndex:24}];}}]);