ant-design/b72a4bf6-async.a024cebc.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["b72a4bf6"],{b72a4bf6:function(e,a,n){"use strict";n.d(a,"__esModule",{value:!0}),n.d(a,"texts",{enumerable:!0,get:function(){return o;}}),n("9f5aeb4c");let o=[{value:"Ant Design v5 \u63D0\u4F9B\u4E86 Design Token \u6A21\u578B\uFF0C\u652F\u6301\u81EA\u5B9A\u4E49\u7B97\u6CD5\u5B9E\u73B0\u4E3B\u9898\u62D3\u5C55\u80FD\u529B\u3002\u4F8B\u5982 \u7D27\u51D1\u4E3B\u9898 \u672C\u8EAB\u5E76\u4E0D\u643A\u5E26\u989C\u8272\u6837\u5F0F\u7B97\u6CD5\uFF0C\u6240\u4EE5\u53EF\u4EE5\u901A\u8FC7\u4F20\u5165\u591A\u4E2A\u7B97\u6CD5\u7684\u65B9\u5F0F\u5B9E\u73B0 \u4EAE\u8272\u4E3B\u9898\u4E0B\u7684\u7D27\u51D1\u4E3B\u9898 \u4EE5\u53CA \u6697\u8272\u4E3B\u9898\u4E0B\u7684\u7D27\u51D1\u4E3B\u9898\u3002",paraId:0},{value:"\u800C\u4ECA\u5929\uFF0C\u6211\u4EEC\u73B0\u5728\u653E\u4E0B\u7B97\u6CD5\u90E8\u5206\u3002\u8BB2\u8BB2\u5982\u4F55\u901A\u8FC7 ConfigProvider \u6765\u62D3\u5C55\u4E3B\u9898\u3002",paraId:1},{value:"\u8FD9\u662F\u6211\u901A\u8FC7 ConfigProvider \u6765\u62D3\u5C55\u4E3B\u9898\u7684\u793A\u4F8B\uFF0C\u4F60\u53EF\u4EE5\u76F4\u63A5\u5728",paraId:2,tocIndex:0},{value:"\u8FD9\u91CC",paraId:2,tocIndex:0},{value:"\u67E5\u770B\u5B8C\u6574\u7684\u4EE3\u7801\uFF08",paraId:2,tocIndex:0},{value:"\u5728\u7EBF\u6F14\u793A",paraId:2,tocIndex:0},{value:"\uFF09\uFF1A",paraId:2,tocIndex:0},{value:"\u4EE5\u4E0B\u4F1A\u804A\u804A\u5728 Ant Design \u4E2D\u5982\u4F55\u4F7F\u7528 ConfigProvider \u62D3\u5C55\u4E3B\u9898\u3002\u5F53\u7136\u8FD9\u7BC7\u6587\u7AE0\u5E76\u4E0D\u662F CSS \u7684\u6559\u7A0B\uFF0C\u6240\u4EE5\u4E0D\u4F1A\u53BB\u4ECB\u7ECD\u4E0A\u9762\u7684\u6837\u5F0F\u5B9E\u73B0\u3002\u5982\u679C\u6709\u5174\u8DA3\u53EF\u4EE5\u76F4\u63A5\u770B\u770B\u4E0A\u9762\u7684\u4EE3\u7801\u5730\u5740\u3002",paraId:3,tocIndex:0},{value:"Design Token \u63D0\u4F9B\u4E86\u975E\u5E38\u5F3A\u5927\u7684\u62D3\u5C55\u80FD\u529B\uFF0C\u4F46\u662F\u540C\u6837\u5B83\u4E5F\u6709\u9650\u5236\u3002\u4F8B\u5982\u5F53 Token \u5E76\u6CA1\u6709\u652F\u6301\u67D0\u4E9B\u914D\u7F6E\u65F6\uFF0C\u5F00\u53D1\u8005\u5C31\u53D8\u5F97\u65E0\u80FD\u4E3A\u529B\u4E86\u3002\u66F4\u6709\u751A\u8005\uFF0C\u67D0\u4E9B\u4E3B\u9898\u5B9E\u73B0\u4E0D\u80FD\u5355\u7EAF\u4F9D\u8D56\u67D0\u79CD Token \u5C31\u4F1A\u53D8\u5F97\u5341\u5206\u56F0\u96BE\u3002\u4F8B\u5982\u5728\u4E0A\u9762\u4F8B\u5B50\u4E2D\u7684\u5404\u79CD\u6E10\u53D8\u8FB9\u6846\u8272\u4E0D\u80FD\u7B80\u5355\u7684\u901A\u8FC7 ",paraId:4,tocIndex:1},{value:"border-color",paraId:4,tocIndex:1},{value:" \u6765\u5B9E\u73B0\uFF0C\u5B83\u9700\u8981\u4E00\u4E9B CSS \u5C0F\u6280\u5DE7\u3002\u800C\u5982",paraId:4,tocIndex:1},{value:"\u300A\u5FEB\u4E50\u5DE5\u4F5C\u4E3B\u9898\u300B",paraId:5,tocIndex:1},{value:"\u6211\u4EEC\u63D0\u5230\uFF0C\u5C06\u4E00\u4E9B\u5177\u4F53\u5B9E\u73B0\u843D\u5730\u5230 Design Token \u4F1A\u4F7F\u5F97\u4EE3\u7801\u8D28\u91CF\u8FC5\u901F\u52A3\u5316\u3002\u56E0\u800C\u6211\u4EEC\u9700\u8981\u4E00\u4E9B\u5176\u4ED6\u7684\u65B9\u5F0F\u6765\u62D3\u5C55\u4E3B\u9898\uFF0C\u53EF\u4EE5\u7EDF\u4E00\u7684\u4FEE\u6539\u67D0\u4E2A\u7EC4\u4EF6\u7684\u6837\u5F0F\u3002\u800C ConfigProvider \u5C31\u662F\u8FD9\u6837\u7684\u4E00\u4E2A\u5165\u53E3\u3002",paraId:4,tocIndex:1},{value:"\u5728 ",paraId:6,tocIndex:2},{value:"5.7.0",paraId:6,tocIndex:2},{value:" \u4E2D\uFF0CConfigProvider \u652F\u6301\u4E86\u6240\u6709\u7EC4\u4EF6\u7684 ",paraId:6,tocIndex:2},{value:"className",paraId:6,tocIndex:2},{value:" \u548C ",paraId:6,tocIndex:2},{value:"style",paraId:6,tocIndex:2},{value:" \u914D\u7F6E\u3002\u56E0\u6B64\u6211\u4EEC\u53EF\u4EE5\u5F88\u5BB9\u6613\u8FDB\u884C Token \u4E4B\u5916\u7684\u62D3\u5C55\uFF1A",paraId:6,tocIndex:2},{value:"<ConfigProvider\n  button={{ className: 'my-button' }}\n  checkbox={{ className: 'my-checkbox' }}\n  divider={{ className: 'my-divider' }}\n/>\n",paraId:7,tocIndex:2},{value:"\u63A5\u7740\u6211\u4EEC\u5C31\u53EF\u4EE5\u53BB\u6DFB\u52A0\u6211\u4EEC\u7684\u6837\u5F0F\u4E86\uFF1A",paraId:8,tocIndex:2},{value:".my-button {\n  background: red;\n}\n",paraId:9,tocIndex:2},{value:"\u4F60\u4F1A\u53D1\u73B0\uFF0C\u8FD9\u5176\u5B9E\u5947\u602A\u3002\u65E2\u7136\u6211\u4EEC\u53EF\u4EE5\u901A\u8FC7 ",paraId:10,tocIndex:2},{value:"className",paraId:10,tocIndex:2},{value:" \u6765\u4FEE\u6539\u6837\u5F0F\uFF0C\u90A3\u4E48\u4E3A\u4EC0\u4E48\u8FD8\u9700\u8981 ConfigProvider \u5462\uFF1F\u6211\u4EEC\u8986\u76D6 ",paraId:10,tocIndex:2},{value:".ant-btn",paraId:10,tocIndex:2},{value:" \u6837\u5F0F\u4E0D\u5C31\u884C\u4E86\u3002",paraId:10,tocIndex:2},{value:"\u5982\u679C\u4F60\u7684\u9879\u76EE\u53EA\u7531\u4F60\u4E00\u4E2A\u4EBA\u6765\u7EF4\u62A4\uFF0C\u8FD9\u662F\u4E2A\u4E0D\u9519\u7684\u4E3B\u610F\u3002\u4F46\u662F\u5982\u679C\u4F60\u7684\u9879\u76EE\u662F\u4E00\u4E2A\u5927\u578B\u9879\u76EE\uFF0C\u90A3\u4E48\u4F60\u5C31\u4F1A\u53D1\u73B0\u8FD9\u6837\u7684\u505A\u6CD5\u4F1A\u5BFC\u81F4\u6837\u5F0F\u51B2\u7A81\u3002\u5C24\u5176\u5728\u591A\u4EBA\u534F\u4F5C\u7684\u60C5\u51B5\u4E0B\uFF0C\u968F\u610F\u4FEE\u6539\u6837\u5F0F\u4F1A\u51FA\u73B0\u975E\u9884\u671F\u7684\u7ED3\u679C\uFF0C\u800C\u5176\u4ED6\u4EBA\u4E3A\u4E86\u8986\u76D6\u4F60\u7684\u6837\u5F0F\u4E0D\u5F97\u4E0D\u4F7F\u7528\u66F4\u52A0\u590D\u6742\u7684\u9009\u62E9\u5668\u3002\u800C ConfigProvider \u5219\u53EF\u4EE5\u5F88\u597D\u7684\u89E3\u51B3\u8FD9\u4E2A\u95EE\u9898\uFF0C\u5B83\u53EF\u4EE5\u5C06\u6837\u5F0F\u9694\u79BB\u5728 ConfigProvider \u5185\u90E8\uFF0C\u4E0D\u4F1A\u5F71\u54CD\u5230\u5176\u4ED6\u7EC4\u4EF6\u3002",paraId:11,tocIndex:2},{value:"\u4E0A\u9762\u7684\u793A\u4F8B\u770B\u8D77\u6765\u5B9E\u73B0\u5F88\u5BB9\u6613\uFF0C\u4F46\u662F\u771F\u5B9E\u573A\u666F\u4E0B\u4F60\u4F1A\u53D1\u73B0\u5BF9\u4E8E\u5C42\u7EA7\u7ED3\u6784\u800C\u8A00\u4E0D\u514D\u4E5F\u6709\u4E00\u4E9B\u4E0D\u8DB3\u3002\u6BD4\u5982\u8BF4 ",paraId:12,tocIndex:3},{value:"ant-",paraId:12,tocIndex:3},{value:" \u524D\u7F00\u53EF\u4EE5\u901A\u8FC7 ConfigProvider \u7684 ",paraId:12,tocIndex:3},{value:"prefixCls",paraId:12,tocIndex:3},{value:" \u4FEE\u6539\uFF0C\u6240\u4EE5\u8BED\u4E49\u5316\u7ED3\u6784\u7684\u524D\u7F00\u53EF\u80FD\u4ECE ",paraId:12,tocIndex:3},{value:"ant-btn-icon",paraId:12,tocIndex:3},{value:" \u53D8\u6210 ",paraId:12,tocIndex:3},{value:"abc-btn-icon",paraId:12,tocIndex:3},{value:"\u3002\u90A3\u4E48\u4EC5\u901A\u8FC7 ",paraId:12,tocIndex:3},{value:"my-button",paraId:12,tocIndex:3},{value:" \u662F\u4E0D\u8DB3\u4EE5\u5B9E\u73B0\u8986\u76D6\u7684\uFF1A",paraId:12,tocIndex:3},{value:".my-button {\n  // OPS. It's `abc-btn-icon` now.\n  .ant-btn-icon {\n    background: red;\n  }\n}\n",paraId:13,tocIndex:3},{value:"\u6240\u4EE5\u6211\u4EEC\u7684\u62D3\u5C55\u4E3B\u9898\u4E5F\u540C\u6837\u9700\u8981\u80FD\u591F\u6D88\u8D39 ",paraId:14,tocIndex:3},{value:"prefixCls",paraId:14,tocIndex:3},{value:" \u7684\u80FD\u529B\u3002\u800C\u5728 CSS-in-JS \u4E2D\uFF0C\u6DF7\u5408 ",paraId:14,tocIndex:3},{value:"prefixCls",paraId:14,tocIndex:3},{value:" \u662F\u5F88\u5BB9\u6613\u7684\u4E8B\u60C5\u3002\u6211\u4EEC\u53EF\u4EE5\u901A\u8FC7 ConfigProvider \u7684 ",paraId:14,tocIndex:3},{value:"getPrefixCls",paraId:14,tocIndex:3},{value:" \u65B9\u6CD5\u6765\u83B7\u53D6 ",paraId:14,tocIndex:3},{value:"prefixCls",paraId:14,tocIndex:3},{value:"\uFF0C\u7136\u540E\u8FDB\u884C\u6DF7\u5408\uFF1A",paraId:14,tocIndex:3},{value:"// This is an example of using `antd-style`, you can use any CSS-in-JS library.\nimport React from 'react';\nimport { ConfigProvider } from 'antd';\nimport { createStyles } from 'antd-style';\n\nconst useButtonStyle = createStyles(({ css }, prefixCls: string) => {\n  return {\n    btn: css`\n      background: red;\n      .${prefixCls}-icon {\n        color: green;\n      }\n    `,\n  };\n});\n\nconst GeekProvider: React.FC<Readonly<React.PropsWithChildren>> = (props) => {\n  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);\n  const btnPrefixCls = getPrefixCls('btn');\n  const { styles } = useButtonStyle(btnPrefixCls);\n  return <ConfigProvider button={{ className: styles.btn }}>{props.children}</ConfigProvider>;\n};\n\nexport default GeekProvider;\n",paraId:15,tocIndex:3},{value:"\u5BF9\u9700\u8981\u7EE7\u627F ",paraId:16,tocIndex:3},{value:"className",paraId:16,tocIndex:3},{value:" \u7684\u573A\u666F\uFF0C\u62D3\u5C55\u4E5F\u5F88\u5BB9\u6613\uFF1A",paraId:16,tocIndex:3},{value:"import React from 'react';\nimport { ConfigProvider } from 'antd';\nimport classNames from 'classnames';\n\nconst GeekProvider: React.FC<Readonly<React.PropsWithChildren>> = (props) => {\n  const { button, getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);\n  const btnPrefixCls = getPrefixCls('btn');\n  const { styles } = useButtonStyle(btnPrefixCls);\n  return (\n    <ConfigProvider button={{ className: classNames(button?.className, styles.btn) }}>\n      {props.children}\n    </ConfigProvider>\n  );\n};\n\nexport default GeekProvider;\n",paraId:17,tocIndex:3},{value:"\u901A\u8FC7 ConfigProvider \u53EF\u4EE5\u8FDB\u4E00\u6B65\u62D3\u5C55\u4E3B\u9898\uFF0C\u5B83\u53EF\u4EE5\u5F88\u597D\u7684\u9694\u79BB\u6837\u5F0F\uFF0C\u907F\u514D\u6837\u5F0F\u51B2\u7A81\u3002\u8D76\u5FEB\u52A8\u624B\u8BD5\u8BD5\u5427\uFF01",paraId:18,tocIndex:4}];}}]);