ant-design/1264a294-async.cdaa70c0.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["1264a294"],{"1264a294":function(a,e,n){"use strict";n.d(e,"__esModule",{value:!0}),n.d(e,"texts",{enumerable:!0,get:function(){return t;}}),n("cf5fd6da");let t=[{value:"\u4F17\u6240\u5468\u77E5\uFF0Cantd v5 \u4F7F\u7528\u4E86 CSS-in-JS \u6280\u672F\u4ECE\u800C\u652F\u6301\u6DF7\u5408\u3001\u52A8\u6001\u6837\u5F0F\u7684\u9700\u6C42\u3002\u76F8\u5BF9\u7684\u5B83\u9700\u8981\u5728\u8FD0\u884C\u65F6\u751F\u6210\u6837\u5F0F\uFF0C\u8FD9\u4F1A\u9020\u6210\u4E00\u5B9A\u7684\u6027\u80FD\u635F\u8017\u3002\u56E0\u6B64\u6211\u4EEC\u7814\u53D1\u4E86\u7EC4\u4EF6\u5E93\u7EA7\u522B\u7684 ",paraId:0},{value:"@ant-design/cssinjs",paraId:0},{value:" \u5E93\uFF0C\u901A\u8FC7\u4E00\u5B9A\u7684\u7EA6\u675F\u63D0\u5347\u7F13\u5B58\u6548\u7387\uFF0C\u4ECE\u800C\u8FBE\u5230\u6027\u80FD\u4F18\u5316\u7684\u76EE\u7684\u3002\u4E0D\u8FC7\u6211\u4EEC\u5E76\u4E0D\u6B62\u6B65\u4E8E\u6B64\u3002\u6211\u4EEC\u53EF\u4EE5\u901A\u8FC7\u4E00\u4E9B\u903B\u8F91\uFF0C\u76F4\u63A5\u8DF3\u8FC7\u8FD0\u884C\u65F6\u751F\u6210\u6837\u5F0F\u7684\u9636\u6BB5\u3002",paraId:0},{value:"\u5982\u679C\u4F60\u7814\u7A76\u8FC7 Ant Design \u7684\u5B98\u7F51\uFF0C\u4F60\u4F1A\u53D1\u73B0 Ant Design \u7684\u7EC4\u4EF6\u5E76\u6CA1\u6709\u52A8\u6001\u63D2\u5165 ",paraId:1,tocIndex:0},{value:"<style />",paraId:1,tocIndex:0},{value:" \u6765\u63A7\u5236\u6837\u5F0F\uFF0C\u800C\u662F\u901A\u8FC7 CSS \u6587\u4EF6\u6765\u63A7\u5236\u6837\u5F0F\uFF1A",paraId:1,tocIndex:0},{value:"document.head",paraId:2,tocIndex:0},{value:" \u91CC\u6709\u51E0\u4E2A ",paraId:2,tocIndex:0},{value:"css",paraId:2,tocIndex:0},{value:" \u6587\u4EF6\u5F15\u7528\uFF1A",paraId:2,tocIndex:0},{value:"umi.[hash].css",paraId:3,tocIndex:0},{value:"style-acss.[hash].css",paraId:3,tocIndex:0},{value:"\u524D\u8005\u4E3A dumi \u751F\u6210\u7684\u6837\u5F0F\u5185\u5BB9\uFF0C\u4F8B\u5982 Demo \u5757\u3001\u641C\u7D22\u6846\u6837\u5F0F\u7B49\u7B49\u3002\u800C\u540E\u8005\u5219\u662F SSR \u751F\u6210\u7684\u6837\u5F0F\u6587\u4EF6\u3002\u5728",paraId:4,tocIndex:0},{value:"\u5B9A\u5236\u4E3B\u9898",paraId:5,tocIndex:0},{value:"\u6587\u6863\u4E2D\uFF0C\u6211\u4EEC\u63D0\u8FC7\u53EF\u4EE5\u901A\u8FC7\u6574\u4F53\u5BFC\u51FA\u7684\u65B9\u5F0F\u5C06\u9875\u9762\u4E2D\u7528\u5230\u7684\u7EC4\u4EF6\u8FDB\u884C\u9884\u5148\u70D8\u7119\uFF0C\u4ECE\u800C\u751F\u6210 css \u6587\u4EF6\u4EE5\u4F9B\u7F13\u5B58\u547D\u4E2D\u4ECE\u800C\u63D0\u5347\u4E0B\u4E00\u6B21\u6253\u5F00\u901F\u5EA6\u3002\u8FD9\u4E5F\u662F\u6211\u4EEC\u5728\u5B98\u7F51\u4E2D\u4F7F\u7528\u7684\u65B9\u5F0F\u3002\u6240\u4EE5 Demo \u4E2D\u7684\u7EC4\u4EF6\uFF0C\u5176\u5B9E\u5C31\u662F\u590D\u7528\u4E86\u8FD9\u90E8\u5206\u6837\u5F0F\u3002",paraId:4,tocIndex:0},{value:"\u7B49\u7B49\uFF01CSS-in-JS \u4E0D\u662F\u9700\u8981\u5728\u8FD0\u884C\u65F6\u751F\u6210\u6837\u5F0F\u7684 hash \u7136\u540E\u901A\u8FC7 ",paraId:6,tocIndex:0},{value:"<style />",paraId:6,tocIndex:0},{value:" \u8FDB\u884C\u5BF9\u9F50\u7684\u4E48\uFF1F\u4E3A\u4EC0\u4E48 css \u6587\u4EF6\u4E5F\u53EF\u4EE5\u5BF9\u9F50\uFF1F\u4E0D\u7528\u7740\u6025\uFF0C\u6211\u4EEC\u6162\u6162\u770B\u3002",paraId:6,tocIndex:0},{value:"\u5E94\u7528\u7EA7\u7684 CSS-in-JS \u65B9\u6848\u4F1A\u5BF9\u751F\u6210\u7684\u6837\u5F0F\u8BA1\u7B97\u51FA hash \u503C\uFF0C\u5E76\u4E14\u5C06\u5176\u5B58\u5165 Cache \u4E2D\u3002\u5F53\u4E0B\u6B21\u6E32\u67D3\u65F6\uFF0C\u4F1A\u5148\u4ECE Cache \u4E2D\u67E5\u627E\u662F\u5426\u5B58\u5728\u5BF9\u5E94\u7684\u6837\u5F0F\uFF0C\u5982\u679C\u5B58\u5728\u5219\u76F4\u63A5\u4F7F\u7528\uFF0C\u5426\u5219\u518D\u751F\u6210\u4E00\u6B21\u3002\u8FD9\u6837\u5C31\u53EF\u4EE5\u907F\u514D\u91CD\u590D\u751F\u6210\u6837\u5F0F\uFF0C\u4ECE\u800C\u63D0\u5347\u6027\u80FD\u3002",paraId:7,tocIndex:1},{value:"\u6BCF\u4E2A\u52A8\u6001\u63D2\u5165\u5230\u9875\u9762\u4E2D\u7684\u6837\u5F0F\u540C\u6837\u4EE5 hash \u4F5C\u4E3A\u552F\u4E00\u6807\u8BC6\u7B26\u3002\u5982\u679C\u9875\u9762\u4E2D\u5DF2\u7ECF\u5B58\u5728\u8BE5 hash \u7684 ",paraId:8,tocIndex:1},{value:"<style />",paraId:8,tocIndex:1},{value:"\uFF0C\u5219\u8BF4\u660E SSR \u4E2D\u505A\u8FC7 inline style \u6CE8\u5165\u3002\u90A3\u4E48 ",paraId:8,tocIndex:1},{value:"<style />",paraId:8,tocIndex:1},{value:" \u5C31\u4E0D\u7528\u518D\u6B21\u521B\u5EFA\u3002",paraId:8,tocIndex:1},{value:"\u4F60\u53EF\u4EE5\u53D1\u73B0\uFF0C\u867D\u7136 ",paraId:9,tocIndex:1},{value:"<style />",paraId:9,tocIndex:1},{value:" \u7684\u8282\u70B9\u521B\u5EFA\u53EF\u4EE5\u7701\u7565\uFF0C\u4F46\u662F\u56E0\u4E3A hash \u4F9D\u8D56\u4E8E\u8BA1\u7B97\u51FA\u7684\u6837\u5F0F\u5185\u5BB9\u3002\u6240\u4EE5\u5373\u4FBF\u9875\u9762\u4E2D\u5DF2\u7ECF\u6709\u53EF\u4EE5\u590D\u7528\u7684\u6837\u5F0F\u5185\u5BB9\uFF0C\u5B83\u4ECD\u7136\u514D\u4E0D\u4E86\u9700\u8981\u8BA1\u7B97\u4E00\u6B21\u3002\u5B9E\u5C5E\u4E0D\u5212\u7B97\u3002",paraId:9,tocIndex:1},{value:"\u5728 ",paraId:10,tocIndex:2},{value:"\u7EC4\u4EF6\u7EA7\u522B\u7684 CSS-in-JS",paraId:11,tocIndex:2},{value:" \u4E00\u6587\u4E2D\uFF0C\u6211\u4EEC\u63D0\u8FC7\u3002Ant Design \u7684 Cache \u673A\u5236\u5E76\u4E0D\u9700\u8981\u8BA1\u7B97\u51FA\u5B8C\u6574\u7684\u6837\u5F0F\u3002\u5BF9\u4E8E\u7EC4\u4EF6\u5E93\u800C\u8A00\uFF0C\u53EA\u8981\u901A\u8FC7 Token \u548C ComponentName \u5C31\u53EF\u4EE5\u786E\u5B9A\u751F\u6210\u6837\u5F0F\u4E00\u81F4\u6027\uFF0C\u6240\u4EE5\u6211\u4EEC\u53EF\u4EE5\u63D0\u524D\u8BA1\u7B97\u51FA hash \u503C\uFF1A",paraId:10,tocIndex:2},{value:"\u4E5F\u56E0\u6B64\uFF0C\u6211\u4EEC\u53D1\u73B0\u53EF\u4EE5\u590D\u7528\u8FD9\u5957\u673A\u5236\uFF0C\u5B9E\u73B0\u5728\u5BA2\u6237\u7AEF\u4FA7\u611F\u77E5\u7EC4\u4EF6\u6837\u5F0F\u662F\u5426\u5DF2\u7ECF\u6CE8\u5165\u8FC7\u3002",paraId:12,tocIndex:2},{value:"\u5728 ",paraId:13,tocIndex:3},{value:"@ant-design/cssinjs",paraId:13,tocIndex:3},{value:" \u4E2D\uFF0CCache \u672C\u8EAB\u5305\u542B\u4E86\u6BCF\u4E2A\u5143\u7D20\u5BF9\u5E94\u7684 style \u548C hash \u4FE1\u606F\u3002\u8FC7\u53BB\u7684 ",paraId:13,tocIndex:3},{value:"extractStyle",paraId:13,tocIndex:3},{value:" \u65B9\u6CD5\u53EA\u53D6 Cache \u4E2D style \u7684\u5185\u5BB9\u8FDB\u884C\u5C01\u88C5\uFF1A",paraId:13,tocIndex:3},{value:'// e.g. Real world path is much more complex\n{\n  "bAMbOo|Button": ["LItTlE", ":where(.bAMbOo).ant-btn { color: red }"],\n  "bAMbOo|Spin": ["liGHt", ":where(.bAMbOo).ant-spin { color: blue }"]\n}\n',paraId:14,tocIndex:3},{value:"\u63D0\u53D6\uFF1A",paraId:15,tocIndex:3},{value:":where(.bAMbOo).ant-btn {\n  color: red;\n}\n:where(.bAMbOo).ant-spin {\n  color: blue;\n}\n",paraId:16,tocIndex:3},{value:"\u4E3A\u4E86\u590D\u7528\u6837\u5F0F\uFF0C\u6211\u4EEC\u66F4\u8FDB\u4E00\u6B65\u3002\u5C06 path \u548C hash \u503C\u4E5F\u8FDB\u884C\u4E86\u62BD\u53D6\uFF1A",paraId:17,tocIndex:3},{value:'{\n  "bAMbOo|Button": "LItTlE",\n  "bAMbOo|Spin": "liGHt"\n}\n',paraId:18,tocIndex:3},{value:"\u5E76\u4E14\u4E5F\u6253\u6210 css \u6837\u5F0F\uFF1A",paraId:19,tocIndex:3},{value:"// Just example. Not real world code\n.cssinjs-cache-path {\n  content: 'bAMbOo|Button:LItTlE;bAMbOo|Spin:liGHt';\n}\n",paraId:20,tocIndex:3},{value:"\u8FD9\u6837 SSR \u4FA7\u5C31\u5C06\u6211\u4EEC\u6240\u9700\u7684\u4FE1\u606F\u5168\u90E8\u7559\u5B58\u4E86\u4E0B\u6765\uFF0C\u63A5\u4E0B\u53BB\u53EA\u9700\u8981\u5728\u5BA2\u6237\u7AEF\u8FDB\u884C\u63D0\u53D6\u5373\u53EF\u3002",paraId:21,tocIndex:3},{value:"\u5728\u5BA2\u6237\u7AEF\u5219\u7B80\u5355\u7684\u591A\uFF0C\u6211\u4EEC\u901A\u8FC7 ",paraId:22,tocIndex:4},{value:"getComputedStyle",paraId:22,tocIndex:4},{value:" \u63D0\u53D6 HashMap \u4FE1\u606F\u7559\u5B58\u5373\u53EF\uFF1A",paraId:22,tocIndex:4},{value:"// Just example. Not real world code\nconst measure = document.createElement('div');\nmeasure.className = 'cssinjs-cache-path';\ndocument.body.appendChild(measure);\n\n// Now let's parse the `content`\nconst { content } = getComputedStyle(measure);\n",paraId:23,tocIndex:4},{value:"\u5728\u7EC4\u4EF6\u6E32\u67D3\u9636\u6BB5\uFF0C",paraId:24,tocIndex:4},{value:"useStyleRegister",paraId:24,tocIndex:4},{value:" \u5728\u8BA1\u7B97 CSS Object \u4E4B\u524D\uFF0C\u4F1A\u5148\u5728 HashMap \u4E2D\u67E5\u627E path \u662F\u5426\u5B58\u5728\u3002\u5982\u679C\u5B58\u5728\uFF0C\u5219\u8BF4\u660E\u8BE5\u6570\u636E\u5DF2\u7ECF\u901A\u8FC7\u670D\u52A1\u7AEF\u751F\u6210\u3002\u6211\u4EEC\u53EA\u9700\u8981\u5C06\u6837\u5F0F\u4ECE\u73B0\u6709\u7684 ",paraId:24,tocIndex:4},{value:"<style />",paraId:24,tocIndex:4},{value:" \u91CC\u63D0\u53D6\u51FA\u6765\u5373\u53EF\uFF1A",paraId:24,tocIndex:4},{value:'// e.g. Real world path is much more complex\n{\n  "bAMbOo|Button": ["LItTlE", "READ_FROM_INLINE_STYLE"],\n  "bAMbOo|Spin": ["liGHt", "READ_FROM_INLINE_STYLE"]\n}\n',paraId:25,tocIndex:4},{value:"\u800C\u5BF9\u4E8E CSS \u6587\u4EF6\u63D0\u4F9B\u7684\u6837\u5F0F\uFF08\u6BD4\u5982\u5B98\u7F51\u7684\u4F7F\u7528\u65B9\u5F0F\uFF09\uFF0C\u5B83\u4E0D\u50CF ",paraId:26,tocIndex:4},{value:"<style />",paraId:26,tocIndex:4},{value:" \u4F1A\u88AB\u79FB\u9664\uFF0C\u6211\u4EEC\u76F4\u63A5\u6807\u8BB0\u4E3A\u6765\u81EA\u4E8E CSS \u6587\u4EF6\u5373\u53EF\u3002\u548C inline style \u4E00\u6837\uFF0C\u5B83\u4EEC\u4F1A\u5728 ",paraId:26,tocIndex:4},{value:"useInsertionEffect",paraId:26,tocIndex:4},{value:" \u9636\u6BB5\u88AB\u8DF3\u8FC7\u3002",paraId:26,tocIndex:4},{value:'// e.g. Real world path is much more complex\n{\n  "bAMbOo|Button": ["LItTlE", "__FROM_CSS_FILE__"],\n  "bAMbOo|Spin": ["liGHt", "__FROM_CSS_FILE__"]\n}\n',paraId:27,tocIndex:4},{value:"CSS-in-JS \u56E0\u4E3A\u8FD0\u884C\u65F6\u7684\u6027\u80FD\u635F\u8017\u800C\u88AB\u4EBA\u8BDF\u75C5\u3002\u800C\u5728 Ant Design \u4E2D\uFF0C\u5982\u679C\u4F60\u7684\u5E94\u7528\u4F7F\u7528\u4E86 SSR\uFF0C\u90A3\u4E48\u5728\u5BA2\u6237\u7AEF\u4FA7\u5C31\u53EF\u4EE5\u76F4\u63A5\u8DF3\u8FC7\u8FD0\u884C\u65F6\u751F\u6210\u6837\u5F0F\u7684\u9636\u6BB5\u4ECE\u800C\u63D0\u5347\u6027\u80FD\u3002\u5F53\u7136\uFF0C\u6211\u4EEC\u4F1A\u7EE7\u7EED\u8DDF\u8FDB CSS-in-JS \u7684\u53D1\u5C55\uFF0C\u4E3A\u4F60\u5E26\u6765\u66F4\u597D\u7684\u4F53\u9A8C\u3002",paraId:28,tocIndex:5}];}}]);