ant-design/03cfa5ec-async.516cccc7.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["03cfa5ec"],{"03cfa5ec":function(e,t,n){"use strict";n.d(t,"__esModule",{value:!0}),n.d(t,"default",{enumerable:!0,get:function(){return x;}});var a=n("777fffbe"),s=n("f19d2b93"),l=a._(n("b622e337")),c=a._(n("97c488ea")),d=a._(n("c96b0d01")),r=n("5b220c3d"),i=n("9c86e52a"),o=n("33bc43e2"),x=function(){return(0,s.jsx)(i.DumiPage,{children:(0,s.jsx)(r.Suspense,{fallback:(0,s.jsx)(d.default,{}),children:(0,s.jsx)(s.Fragment,{children:(0,s.jsxs)("div",{className:"markdown",children:[(0,s.jsxs)("p",{children:[o.texts[0].value,(0,s.jsx)(c.default,{to:"/docs/react/customize-theme-cn",sourceType:"Link",children:o.texts[1].value}),o.texts[2].value]}),(0,s.jsxs)("h3",{id:"inline-style",children:[(0,s.jsx)(c.default,{"aria-hidden":"true",tabIndex:"-1",href:"#inline-style",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"Inline Style"]}),(0,s.jsx)("blockquote",{children:(0,s.jsx)("p",{children:o.texts[3].value})}),(0,s.jsxs)("p",{children:[o.texts[4].value,(0,s.jsx)("code",{children:o.texts[5].value}),o.texts[6].value]}),(0,s.jsx)(l.default,{lang:"html",children:o.texts[7].value}),(0,s.jsxs)("p",{children:[o.texts[8].value,(0,s.jsx)("code",{children:o.texts[9].value}),o.texts[10].value]}),(0,s.jsx)("p",{children:o.texts[11].value}),(0,s.jsx)(l.default,{lang:"html",children:o.texts[12].value}),(0,s.jsx)("p",{children:o.texts[13].value}),(0,s.jsx)(l.default,{lang:"tsx",children:o.texts[14].value}),(0,s.jsx)("p",{children:o.texts[15].value}),(0,s.jsxs)("h3",{id:"static-extract-style",children:[(0,s.jsx)(c.default,{"aria-hidden":"true",tabIndex:"-1",href:"#static-extract-style",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"Static Extract Style"]}),(0,s.jsxs)("p",{children:[o.texts[16].value,(0,s.jsx)(c.default,{href:"https://github.com/ant-design/ant-design/discussions/40985",sourceType:"a",children:o.texts[17].value}),o.texts[18].value]}),(0,s.jsx)(l.default,{lang:"tsx",children:o.texts[19].value}),(0,s.jsx)("p",{children:o.texts[20].value}),(0,s.jsx)(l.default,{lang:"tsx",children:o.texts[21].value}),(0,s.jsx)("p",{children:o.texts[22].value}),(0,s.jsx)(l.default,{lang:"tsx",children:o.texts[23].value}),(0,s.jsxs)("h3",{id:"part-static-extract-style",children:[(0,s.jsx)(c.default,{"aria-hidden":"true",tabIndex:"-1",href:"#part-static-extract-style",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"Part Static Extract Style"]}),(0,s.jsx)("p",{children:o.texts[24].value}),(0,s.jsx)(l.default,{lang:"tsx",children:o.texts[25].value}),(0,s.jsx)("p",{children:o.texts[26].value}),(0,s.jsx)(l.default,{lang:"html",children:o.texts[27].value}),(0,s.jsxs)("p",{children:[o.texts[28].value,(0,s.jsx)(c.default,{href:"https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand",sourceType:"a",children:o.texts[29].value}),o.texts[30].value]}),(0,s.jsx)("p",{children:o.texts[31].value}),(0,s.jsx)("p",{children:o.texts[32].value}),(0,s.jsxs)("h2",{id:"\u603B\u7ED3",children:[(0,s.jsx)(c.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u603B\u7ED3",sourceType:"a",children:(0,s.jsx)("span",{className:"icon icon-link"})}),"\u603B\u7ED3"]}),(0,s.jsx)("p",{children:o.texts[33].value})]})})})});};},"33bc43e2":function(e,t,n){"use strict";n.d(t,"__esModule",{value:!0}),n.d(t,"texts",{enumerable:!0,get:function(){return a;}}),n("77e923f0");let a=[{value:"\u4F20\u7EDF\u7684 js + css \u7F51\u7AD9\uFF0CSSR \u4E00\u822C\u53EA\u9700\u8981\u5904\u7406\u597D\u9996\u6B21\u6E32\u67D3\u7684\u6CE8\u6C34\u95EE\u9898\u3002\u800C\u5F53 CSS-in-JS \u6280\u672F\u7684\u5F15\u5165\uFF0C\u5F00\u53D1\u8005\u5219\u9700\u8981\u989D\u5916\u5173\u6CE8\u5982\u4F55\u5C06\u6837\u5F0F\u5BFC\u51FA\u5230 HTML \u4E2D\uFF0C\u4EE5\u4FDD\u8BC1\u9996\u6B21\u6E32\u67D3\u7684\u6B63\u786E\u6027\u3002\u6211\u4EEC\u63D0\u4F9B\u4E86\u975E\u5E38\u591A\u7684\u5B9E\u73B0\u65B9\u5F0F\uFF0C\u4E5F\u6B63\u597D\u5728\u6B64\u804A\u804A\u5176\u4E2D\u7684\u601D\u8DEF\u3002\u5982\u679C\u4F60\u9700\u8981\u5B8C\u6574\u7684\u6587\u6863\u6216\u8005\u793A\u4F8B\u6B22\u8FCE\u67E5\u9605",paraId:0},{value:"\u300A\u5B9A\u5236\u4E3B\u9898\u300B",paraId:1},{value:"\u3002",paraId:0},{value:"\u6700\u7B80\u5355\u7684\u65B9\u5F0F\u5C31\u662F\u5C06\u6837\u5F0F\u76F4\u63A5\u5185\u8054\u5230 HTML \u4E2D\uFF0C\u8FD9\u6837\u5C31\u4E0D\u9700\u8981\u989D\u5916\u7684\u8BF7\u6C42\u3002\u8FD9\u79CD\u65B9\u5F0F\u7684\u7F3A\u70B9\u662F\uFF0C\u6837\u5F0F\u65E0\u6CD5\u88AB\u6D4F\u89C8\u5668\u7F13\u5B58\uFF0C\u6BCF\u6B21\u8BF7\u6C42\u90FD\u9700\u8981\u91CD\u65B0\u4E0B\u8F7D\u3002\u800C\u4E14\uFF0C\u5982\u679C\u6837\u5F0F\u8FC7\u591A\uFF0C\u4F1A\u5BFC\u81F4 HTML \u6587\u4EF6\u8FC7\u5927\uFF0C\u5F71\u54CD\u9996\u6B21\u6E32\u67D3\u7684\u901F\u5EA6\u3002",paraId:2,tocIndex:0},{value:"\u5728 v5 alpha \u7248\u672C\u4E2D\uFF0C\u4E3A\u4E86\u515C\u5E95 SSR \u6837\u5F0F\u6E32\u67D3\uFF0C\u6211\u4EEC\u53C2\u8003 ",paraId:3,tocIndex:0},{value:"Emotion",paraId:3,tocIndex:0},{value:" \u7684\u5B9E\u73B0\uFF0C\u4E3A\u6BCF\u4E2A\u5143\u7D20\u524D\u90FD\u52A0\u4E0A\u5BF9\u5E94\u7684\u5185\u8054\u6837\u5F0F\uFF1A",paraId:3,tocIndex:0},{value:'<div>\n  <style>\n    :where(.css-bAmBOo).ant-btn {\n      // ...\n    }\n  </style>\n  <button className="ant-btn css-bAmBOo">Hello World</button>\n</div>\n',paraId:4,tocIndex:0},{value:"\u8FD9\u4E2A\u5B9E\u73B0\u7B80\u5355\u6709\u6548\uFF0C\u552F\u4E00\u7684\u7F3A\u70B9\u5219\u662F\u5BF9\u4E8E ",paraId:5,tocIndex:0},{value:":nth",paraId:5,tocIndex:0},{value:" \u9009\u62E9\u4F1A\u6709\u6837\u5F0F\u6C61\u67D3\u3002\u4F46\u662F\u8003\u8651\u5230 antd \u7EC4\u4EF6\u5176\u5B9E\u5F88\u5C11\u4F7F\u7528\u8FD9\u4E2A\u6837\u5F0F\uFF0C\u526F\u4F5C\u7528\u5BF9\u6211\u4EEC\u6CA1\u4EC0\u4E48\u5F71\u54CD\u3002",paraId:5,tocIndex:0},{value:"\u5F00\u59CB\u7684\u65F6\u5019\u8FD0\u884C\u826F\u597D\uFF0Cantd \u7684\u5B98\u7F51\u51E0\u4E4E\u65E0\u9700\u6539\u9020\u5C31\u76F4\u63A5\u652F\u6301 SSR \u6837\u5F0F\u6EE1\u8DB3\u4E86 SEO \u9700\u6C42\u3002\u4F46\u662F\u968F\u7740\u6211\u4EEC\u7EC4\u4EF6\u9010\u6E10\u8FC1\u79FB\u5230 CSS-in-JS \u7248\u672C\u540E\uFF0C\u6211\u4EEC\u53D1\u73B0\u7AD9\u70B9\u7684\u6784\u5EFA\u4EA7\u7269\u53D8\u5F97\u5341\u5206\u5DE8\u5927\uFF0C\u6162\u6162\u7684\u53D8\u5F97\u4E0D\u53EF\u7528\u3002\u5728\u67E5\u770B HTML \u540E\uFF0C\u6211\u4EEC\u53D1\u73B0\u9ED8\u8BA4\u5185\u8054\u65B9\u5F0F\u5E76\u4E0D\u597D\uFF0C\u5B83\u4F1A\u5BFC\u81F4\u6837\u5F0F\u88AB\u6210\u500D\u7684\u5185\u8054\uFF0C\u4F8B\u5982\u4E00\u4E2A\u9875\u9762\u91CC\u6709 3 \u4E2A Button\uFF0C\u90A3\u5B83\u5C31\u4F1A\u91CD\u590D\u5185\u8054 3 \u6B21\uFF1A",paraId:6,tocIndex:0},{value:'<div>\n  <style>\n    :where(.css-bAmBOo).ant-btn {\n      // ...\n    }\n  </style>\n  <button className="ant-btn css-bAmBOo">Hello World 1</button>\n  <style>\n    :where(.css-bAmBOo).ant-btn {\n      // ...\n    }\n  </style>\n  <button className="ant-btn css-bAmBOo">Hello World 2</button>\n  <style>\n    :where(.css-bAmBOo).ant-btn {\n      // ...\n    }\n  </style>\n  <button className="ant-btn css-bAmBOo">Hello World 3</button>\n</div>\n',paraId:7,tocIndex:0},{value:"\u800C\u5F53\u5927\u90E8\u5206\u7EC4\u4EF6\u90FD\u8F6C\u6210 CSS-in-JS \u540E\uFF0C\u5185\u8054\u6837\u5F0F\u4F1A\u53D8\u5F97\u5341\u5206\u5DE8\u5927\u3002\u6240\u4EE5\u6211\u4EEC\u5728\u540E\u671F\u79FB\u9664\u4E86\u81EA\u52A8\u5185\u8054\u7684\u529F\u80FD\uFF0C\u8F6C\u6210\u4E86\u9700\u8981\u624B\u52A8\u6536\u53D6\u7684\u5F62\u5F0F\uFF1A",paraId:8,tocIndex:0},{value:"import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';\nimport { renderToString } from 'react-dom/server';\n\nconst cache = createCache();\n\n// HTML Content\nconst html = renderToString(\n  <StyleProvider cache={cache}>\n    <MyApp />\n  </StyleProvider>,\n);\n\n// Style Content\nconst styleText = extractStyle(cache);\n",paraId:9,tocIndex:0},{value:"\u8FD9\u662F\u4F20\u7EDF\u7684 CSS-in-JS \u6CE8\u5165\u5B9E\u73B0\u3002\u5C31\u5982\u5F15\u8A00\u6240\u8FF0\uFF0C\u5185\u8054\u6837\u5F0F\u65E0\u6CD5\u7F13\u5B58\u4F1A\u9020\u6210\u989D\u5916\u7684\u52A0\u8F7D\u5F00\u9500\u3002\u4E5F\u56E0\u6B64\uFF0C\u6211\u4EEC\u5C1D\u8BD5\u63A2\u7D22\u4E00\u4E9B\u65B0\u7684\u5B9E\u73B0\u65B9\u5F0F\uFF0C\u53EF\u4EE5\u83B7\u5F97\u5982\u539F\u751F CSS \u7684\u52A0\u8F7D\u4F53\u9A8C\u3002",paraId:10,tocIndex:0},{value:"\u6211\u4EEC\u5728\u601D\u8003\u662F\u5426\u53EF\u4EE5\u5982 v4 \u7248\u672C\u4E00\u6837\uFF0C\u9884\u5148\u70D8\u7119\u7EC4\u4EF6\u7684\u6837\u5F0F\u6765\u4F7F\u524D\u7AEF\u6D88\u8D39\uFF0C\u6240\u4EE5\u63D0\u51FA\u4E86 ",paraId:11,tocIndex:1},{value:"[RFC] Static Extract style",paraId:11,tocIndex:1},{value:"\u3002\u5B83\u7684\u601D\u8DEF\u5F88\u7B80\u5355\uFF0C\u6211\u4EEC\u53EA\u9700\u8981\u63D0\u524D\u5C06\u6240\u6709\u7684\u7EC4\u4EF6\u8FDB\u884C\u4E00\u6B21\u6E32\u67D3\u5C31\u53EF\u4EE5\u4ECE cache \u4E2D\u83B7\u5F97\u5B8C\u6574\u7684\u6837\u5F0F\uFF0C\u7136\u540E\u5C06\u5176\u5199\u5165\u5230 css \u6587\u4EF6\u4E2D\u5373\u53EF\u3002",paraId:11,tocIndex:1},{value:"const cache = createCache();\n\n// HTML Content\nrenderToString(\n  <StyleProvider cache={cache}>\n    <Button />\n    <Switch />\n    <Input />\n    {/* Rest antd components */}\n  </StyleProvider>,\n);\n\n// Style Content\nconst styleText = extractStyle(cache);\n",paraId:12,tocIndex:1},{value:"\u5F53\u7136\uFF0C\u8FD9\u5BF9\u4E8E\u5F00\u53D1\u8005\u800C\u8A00\u7A0D\u5FAE\u6709\u70B9\u9EBB\u70E6\u3002\u6240\u4EE5\u6211\u4EEC\u63D0\u53D6\u4E86\u4E00\u4E2A\u4E09\u65B9\u5305\u6765\u5B9E\u73B0\u8BE5\u9700\u6C42\uFF1A",paraId:13,tocIndex:1},{value:"import { extractStyle } from '@ant-design/static-style-extract';\nimport fs from 'fs';\n\n// `extractStyle` containers all the antd component\n// excludes popup like component which is no need in ssr: Modal, message, notification, etc.\nconst css = extractStyle();\n\nfs.writeFile(...);\n",paraId:14,tocIndex:1},{value:"\u5982\u679C\u5F00\u53D1\u8005\u4F7F\u7528\u4E86\u6DF7\u5408\u4E3B\u9898\uFF0C\u4E5F\u53EF\u4EE5\u81EA\u884C\u5B9E\u73B0\u6DF7\u5408\u9700\u6C42\uFF1A",paraId:15,tocIndex:1},{value:"// `node` is the components set we prepared\nconst css = extractStyle((node) => (\n  <>\n    <ConfigProvider theme={theme1}>{node}</ConfigProvider>\n    <ConfigProvider theme={theme2}>{node}</ConfigProvider>\n    <ConfigProvider theme={theme3}>{node}</ConfigProvider>\n  </>\n));\n",paraId:16,tocIndex:1},{value:"\u5728\u5927\u90E8\u5206\u60C5\u51B5\u4E0B\uFF0C\u4E0A\u9762\u7684\u7528\u6CD5\u5DF2\u7ECF\u6EE1\u8DB3\u4E86\u9700\u6C42\u3002\u4F46\u662F\u6709\u65F6\u5019\uFF0C\u6211\u4EEC\u4F1A\u5E0C\u671B\u517C\u987E CSS-in-JS \u7684\u7075\u6D3B\u6027\uFF0C\u53C8\u83B7\u5F97\u9759\u6001\u6587\u4EF6\u7F13\u5B58\u7684\u597D\u5904\u3002\u90A3\u4E48\u8FD9\u4E2A\u65F6\u5019\u6211\u4EEC\u5C31\u9700\u8981\u5728\u5E94\u7528\u5C42\u9762\u8FDB\u884C\u4E0B\u624B\uFF0C\u5728\u6E32\u67D3\u5BFC\u51FA\u6240\u9700\u7684\u5185\u5BB9\u540E\uFF0C\u4E0D\u540C\u4E8E Inline Style\uFF0C\u800C\u662F\u5C06\u5176\u8F6C\u4E3A\u6587\u4EF6\u5B58\u50A8\u3002\u901A\u8FC7\u7B80\u5355\u7684 hash \u5C31\u53EF\u4EE5\u5B9E\u73B0\u6587\u4EF6\u7684\u7F13\u5B58\uFF1A",paraId:17,tocIndex:2},{value:"import { createHash } from 'crypto';\n\n// Get Style content like above\nconst styleText = extractStyle(cache);\n\nconst hash = createHash('md5').update(styleText).digest('hex');\nconst cssFileName = `css-${hash.substring(0, 8)}.css`;\n\nif (!fs.existsSync(cssFileName)) {\n  fs.writeFileSync(cssFileName, styleText);\n}\n",paraId:18,tocIndex:2},{value:"\u7136\u540E\u5728 HTML \u6A21\u677F\u4FA7\u6DFB\u52A0\u5BF9\u5E94\u7684 CSS \u6587\u4EF6\uFF1A",paraId:19,tocIndex:2},{value:'<!doctype html>\n<html>\n  <head>\n    <link rel="stylesheet" href="${hashCssFileUrl}" />\n  </head>\n  <body>\n    <div id="root">${html}</div>\n  </body>\n</html>\n',paraId:20,tocIndex:2},{value:"\u5B8C\u6574\u5B9E\u73B0\u70B9\u51FB",paraId:21,tocIndex:2},{value:"\u6B64\u5904",paraId:21,tocIndex:2},{value:"\u67E5\u9605\u3002",paraId:21,tocIndex:2},{value:"\u8BBF\u95EE\u4E0D\u540C\u7684\u9875\u9762\u65F6\u4F1A\u751F\u6210\u5BF9\u5E94\u7684 CSS\uFF0C\u6BCF\u4E2A CSS \u90FD\u4F1A\u6709\u5176\u5BF9\u5E94\u7684 Hash \u503C\u3002\u5F53 Hash \u547D\u4E2D\u65F6\uFF0C\u5219\u8BF4\u660E\u8BE5 CSS \u6587\u4EF6\u5DF2\u7ECF\u88AB\u843D\u76D8\uFF0C\u53EF\u4EE5\u76F4\u63A5\u4F7F\u7528\u3002\u7EE7\u800C\u5BF9\u4E8E\u5BA2\u6237\u7AEF\u800C\u8A00\u5C31\u662F\u4E00\u6B21\u6B63\u5E38\u7684 CSS \u6587\u4EF6\u8BBF\u95EE\uFF0C\u540C\u6837\u4EAB\u53D7\u7F13\u5B58\u80FD\u529B\u3002",paraId:22,tocIndex:2},{value:"\u5BF9\u4E8E\u4E0D\u540C\u7684\u7528\u6237\u8BBF\u95EE\u76F8\u540C\u7684\u9875\u9762\u6240\u9700\u7684\u6837\u5F0F\u4E0D\u540C\u6216\u8005\u8BF4\u81EA\u5B9A\u4E49\u4E3B\u9898\u4E0D\u540C\uFF0C\u90FD\u53EF\u4EE5\u901A\u8FC7\u8BE5 Hash \u4F5C\u533A\u5206\u3002",paraId:23,tocIndex:2},{value:"\u5BF9\u4E8E\u4E0D\u590D\u6742\u7684\u5E94\u7528\u800C\u8A00\uFF0C\u6211\u4EEC\u66F4\u63A8\u8350\u4F7F\u7528\u524D\u8005 Static Extract Style\u3002\u5B83\u5DF2\u7ECF\u8DB3\u591F\u7B80\u5355\uFF0C\u4F46\u662F\u5BF9\u4E8E\u60F3\u66F4\u7EC6\u7C92\u5EA6\u63A7\u5236 SSR \u6837\u5F0F\u6E32\u67D3\u4EE5\u83B7\u5F97\u66F4\u597D\u7684\u8BBF\u95EE\u901F\u5EA6\u4F53\u9A8C\u7684\u5F00\u53D1\u8005\uFF0C\u5219\u53EF\u4EE5\u8BD5\u8BD5\u90E8\u5206\u9759\u6001\u5316\u7684\u80FD\u529B\u3002\u4EE5\u4E0A\u3002",paraId:24,tocIndex:3}];}}]);