mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity
gh-pages
ant-design/cb1b2e83-async.33c9234c.js
afc163 903c631b33 deploy: d11f02db92
2025-05-31 08:49:44 +00:00

1 line
32 KiB
JavaScript
Raw Permalink Blame History

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["cb1b2e83"],{a99d4e5b:function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"texts",{enumerable:!0,get:function(){return d;}}),t("a7cd8e4c");let d=[{value:"Ant Design 5.x \u652F\u6301",paraId:0,tocIndex:0},{value:"\u6700\u8FD1 2 \u4E2A\u7248\u672C\u7684\u73B0\u4EE3\u6D4F\u89C8\u5668",paraId:0,tocIndex:0},{value:"\u3002\u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u6211\u4EEC\u4F7F\u7528\u4E86\u4E00\u4E9B\u73B0\u4EE3 CSS \u7279\u6027\u6765\u63D0\u9AD8\u6837\u5F0F\u7684\u53EF\u7EF4\u62A4\u6027\u548C\u53EF\u6269\u5C55\u6027\uFF0C\u8FD9\u4E9B\u7279\u6027\u5728\u65E7\u7248\u6D4F\u89C8\u5668\u4E2D\u53EF\u80FD\u4E0D\u88AB\u652F\u6301\uFF0C\u597D\u5728\u6211\u4EEC\u53EF\u4EE5\u901A\u8FC7\u4E00\u4E9B\u964D\u7EA7\u517C\u5BB9\u65B9\u6848\u6765\u89E3\u51B3\u3002",paraId:0,tocIndex:0},{value:"\u7279\u6027",paraId:1,tocIndex:0},{value:"antd \u7248\u672C",paraId:1,tocIndex:0},{value:"\u517C\u5BB9\u6027",paraId:1,tocIndex:0},{value:"\u6700\u4F4E Chrome \u7248\u672C",paraId:1,tocIndex:0},{value:"\u964D\u7EA7\u517C\u5BB9\u65B9\u6848",paraId:1,tocIndex:0},{value:":where \u9009\u62E9\u5668",paraId:1,tocIndex:0},{value:">=5.0.0",paraId:1,tocIndex:0},{value:"caniuse",paraId:1,tocIndex:0},{value:"Chrome 88",paraId:1,tocIndex:0},{value:'<StyleProvider hashPriority="high">',paraId:1,tocIndex:0},{value:"CSS \u903B\u8F91\u5C5E\u6027",paraId:1,tocIndex:0},{value:">=5.0.0",paraId:1,tocIndex:0},{value:"caniuse",paraId:1,tocIndex:0},{value:"Chrome 89",paraId:1,tocIndex:0},{value:"<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>",paraId:1,tocIndex:0},{value:"\u5982\u679C\u4F60\u9700\u8981\u517C\u5BB9\u65E7\u7248\u6D4F\u89C8\u5668\uFF0C\u8BF7\u6839\u636E\u5B9E\u9645\u9700\u6C42\u4F7F\u7528 ",paraId:2,tocIndex:0},{value:"StyleProvider",paraId:2,tocIndex:0},{value:" \u964D\u7EA7\u5904\u7406\u3002",paraId:2,tocIndex:0},{value:":where",paraId:3},{value:"\u652F\u6301\u7248\u672C\uFF1A",paraId:4,tocIndex:1},{value:">=5.0.0",paraId:4,tocIndex:1},{value:"MDN \u6587\u6863\uFF1A",paraId:4,tocIndex:1},{value:":where",paraId:4,tocIndex:1},{value:"\u6D4F\u89C8\u5668\u517C\u5BB9\u6027\uFF1A",paraId:4,tocIndex:1},{value:"caniuse",paraId:4,tocIndex:1},{value:"Chrome \u6700\u4F4E\u652F\u6301\u7248\u672C\uFF1A88",paraId:4,tocIndex:1},{value:"\u9ED8\u8BA4\u542F\u7528\uFF1A\u662F",paraId:4,tocIndex:1},{value:"Ant Design \u7684 CSS-in-JS \u9ED8\u8BA4\u901A\u8FC7 ",paraId:5,tocIndex:1},{value:":where",paraId:5,tocIndex:1},{value:" \u9009\u62E9\u5668\u964D\u4F4E CSS Selector \u4F18\u5148\u7EA7\uFF0C\u4EE5\u51CF\u5C11\u7528\u6237\u5347\u7EA7\u65F6\u989D\u5916\u8C03\u6574\u81EA\u5B9A\u4E49\u6837\u5F0F\u7684\u6210\u672C\uFF0C\u4E0D\u8FC7 ",paraId:5,tocIndex:1},{value:":where",paraId:5,tocIndex:1},{value:" \u8BED\u6CD5\u7684",paraId:5,tocIndex:1},{value:"\u517C\u5BB9\u6027",paraId:5,tocIndex:1},{value:"\u5728\u4F4E\u7248\u672C\u6D4F\u89C8\u5668\u6BD4\u8F83\u5DEE\u3002\u5728\u67D0\u4E9B\u573A\u666F\u4E0B\u4F60\u5982\u679C\u9700\u8981\u652F\u6301\u65E7\u7248\u6D4F\u89C8\u5668\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 ",paraId:5,tocIndex:1},{value:"@ant-design/cssinjs",paraId:5,tocIndex:1},{value:" \u53D6\u6D88\u9ED8\u8BA4\u7684\u964D\u6743\u64CD\u4F5C\uFF08\u8BF7\u6CE8\u610F\u7248\u672C\u4FDD\u6301\u4E0E antd \u4E00\u81F4\uFF09\uFF1A",paraId:5,tocIndex:1},{value:"import { StyleProvider } from '@ant-design/cssinjs';\n\n// `hashPriority` \u9ED8\u8BA4\u4E3A `low`\uFF0C\u914D\u7F6E\u4E3A `high` \u540E\uFF0C\n// \u4F1A\u79FB\u9664 `:where` \u9009\u62E9\u5668\u5C01\u88C5\nexport default () => (\n <StyleProvider hashPriority=\"high\">\n <MyApp />\n </StyleProvider>\n);\n",paraId:6,tocIndex:1},{value:"\u5207\u6362\u540E\uFF0C\u6837\u5F0F\u5C06\u4ECE ",paraId:7,tocIndex:1},{value:":where",paraId:7,tocIndex:1},{value:" \u5207\u6362\u4E3A\u7C7B\u9009\u62E9\u5668\uFF1A",paraId:7,tocIndex:1},{value:"-- :where(.css-bAMboO).ant-btn {\n++ .css-bAMboO.ant-btn {\n color: #fff;\n }\n",paraId:8,tocIndex:1},{value:"\u6CE8\u610F\uFF1A\u5173\u95ED ",paraId:9,tocIndex:1},{value:":where",paraId:9,tocIndex:1},{value:" \u964D\u6743\u540E\uFF0C\u4F60\u53EF\u80FD\u9700\u8981\u624B\u52A8\u8C03\u6574\u4E00\u4E9B\u6837\u5F0F\u7684\u4F18\u5148\u7EA7\u3002\u4EA6\u6216\u8005",paraId:9,tocIndex:1},{value:"\u4F7F\u7528 PostCSS \u63D2\u4EF6",paraId:9,tocIndex:1},{value:"\u63D0\u5347\u5E94\u7528\u6837\u5F0F\u7684\u4F18\u5148\u7EA7\uFF0CPostCSS \u63D0\u4F9B\u4E86\u975E\u5E38\u591A\u7684\u63D2\u4EF6\u6765\u8C03\u6574\u4F18\u5148\u7EA7\uFF0C\u4F60\u53EF\u4EE5\u81EA\u884C\u6309\u9700\u9009\u62E9\uFF0C\u4F8B\u5982\uFF1A",paraId:9,tocIndex:1},{value:"postcss-scopify",paraId:10,tocIndex:1},{value:"postcss-increase-specificity",paraId:10,tocIndex:1},{value:"postcss-add-root-selector",paraId:10,tocIndex:1},{value:"\u901A\u8FC7\u63D2\u4EF6\u914D\u7F6E\uFF0C\u5C06\u4F60\u7684 css \u6837\u5F0F\u8FDB\u884C\u63D0\u5347\uFF1A",paraId:11,tocIndex:1},{value:"-- .my-btn {\n++ #root .my-btn {\n background: red;\n }\n",paraId:12,tocIndex:1},{value:"\u652F\u6301\u7248\u672C\uFF1A",paraId:13,tocIndex:2},{value:">=5.0.0",paraId:13,tocIndex:2},{value:"MDN \u6587\u6863\uFF1A",paraId:13,tocIndex:2},{value:"CSS Logical Properties",paraId:13,tocIndex:2},{value:"\u6D4F\u89C8\u5668\u517C\u5BB9\u6027\uFF1A",paraId:13,tocIndex:2},{value:"caniuse",paraId:13,tocIndex:2},{value:"Chrome \u6700\u4F4E\u652F\u6301\u7248\u672C\uFF1A89",paraId:13,tocIndex:2},{value:"\u9ED8\u8BA4\u542F\u7528\uFF1A\u662F",paraId:13,tocIndex:2},{value:"\u4E3A\u4E86\u7EDF\u4E00 LTR \u548C RTL \u6837\u5F0F\uFF0CAnt Design \u4F7F\u7528\u4E86 CSS \u903B\u8F91\u5C5E\u6027\u3002\u4F8B\u5982\u539F ",paraId:14,tocIndex:2},{value:"margin-left",paraId:14,tocIndex:2},{value:" \u4F7F\u7528 ",paraId:14,tocIndex:2},{value:"margin-inline-start",paraId:14,tocIndex:2},{value:" \u4EE3\u66FF\uFF0C\u4F7F\u5176\u5728 LTR \u548C RTL \u4E0B\u90FD\u4E3A\u8D77\u59CB\u4F4D\u7F6E\u95F4\u8DDD\u3002\u5982\u679C\u4F60\u9700\u8981\u517C\u5BB9\u65E7\u7248\u6D4F\u89C8\u5668\uFF08\u5982 360 \u6D4F\u89C8\u5668\u3001QQ \u6D4F\u89C8\u5668 \u7B49\u7B49\uFF09\uFF0C\u53EF\u4EE5\u901A\u8FC7 ",paraId:14,tocIndex:2},{value:"@ant-design/cssinjs",paraId:14,tocIndex:2},{value:" \u7684 ",paraId:14,tocIndex:2},{value:"StyleProvider",paraId:14,tocIndex:2},{value:" \u914D\u7F6E ",paraId:14,tocIndex:2},{value:"transformers",paraId:14,tocIndex:2},{value:" \u5C06\u5176\u8F6C\u6362\uFF1A",paraId:14,tocIndex:2},{value:"import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';\n\n// `transformers` \u63D0\u4F9B\u9884\u5904\u7406\u529F\u80FD\u5C06\u6837\u5F0F\u8FDB\u884C\u8F6C\u6362\nexport default () => (\n <StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>\n <MyApp />\n </StyleProvider>\n);\n",paraId:15,tocIndex:2},{value:"\u5207\u6362\u540E\uFF0C\u6837\u5F0F\u5C06\u964D\u7EA7 CSS \u903B\u8F91\u5C5E\u6027\uFF1A",paraId:16,tocIndex:2},{value:".ant-modal-root {\n-- inset: 0;\n++ top: 0;\n++ right: 0;\n++ bottom: 0;\n++ left: 0;\n}\n",paraId:17,tocIndex:2},{value:"@layer",paraId:3},{value:"\u652F\u6301\u7248\u672C\uFF1A",paraId:18,tocIndex:3},{value:">=5.17.0",paraId:18,tocIndex:3},{value:"MDN \u6587\u6863\uFF1A",paraId:18,tocIndex:3},{value:"@layer",paraId:18,tocIndex:3},{value:"\u6D4F\u89C8\u5668\u517C\u5BB9\u6027\uFF1A",paraId:18,tocIndex:3},{value:"caniuse",paraId:18,tocIndex:3},{value:"Chrome \u6700\u4F4E\u652F\u6301\u7248\u672C\uFF1A99",paraId:18,tocIndex:3},{value:"\u9ED8\u8BA4\u542F\u7528\uFF1A\u5426",paraId:18,tocIndex:3},{value:"Ant Design \u4ECE ",paraId:19,tocIndex:3},{value:"5.17.0",paraId:19,tocIndex:3},{value:" \u8D77\u652F\u6301\u914D\u7F6E ",paraId:19,tocIndex:3},{value:"layer",paraId:19,tocIndex:3},{value:" \u8FDB\u884C\u7EDF\u4E00\u964D\u6743\u3002\u7ECF\u8FC7\u964D\u6743\u540E\uFF0Cantd \u7684\u6837\u5F0F\u5C06\u59CB\u7EC8\u4F4E\u4E8E\u9ED8\u8BA4\u7684 CSS \u9009\u62E9\u5668\u4F18\u5148\u7EA7\uFF0C\u4EE5\u4FBF\u4E8E\u7528\u6237\u8FDB\u884C\u6837\u5F0F\u8986\u76D6\uFF08\u8BF7\u52A1\u5FC5\u6CE8\u610F\u68C0\u67E5 ",paraId:19,tocIndex:3},{value:"@layer",paraId:19,tocIndex:3},{value:" \u6D4F\u89C8\u5668\u517C\u5BB9\u6027\uFF09\u3002StyleProvider \u5F00\u542F ",paraId:19,tocIndex:3},{value:"layer",paraId:19,tocIndex:3},{value:" \u65F6\uFF0C\u5B50\u5143\u7D20",paraId:19,tocIndex:3},{value:"\u5FC5\u987B",paraId:19,tocIndex:3},{value:"\u5305\u88F9 ConfigProvider \u4EE5\u66F4\u65B0\u56FE\u6807\u76F8\u5173\u6837\u5F0F\uFF1A",paraId:19,tocIndex:3},{value:"import { StyleProvider } from '@ant-design/cssinjs';\nimport { ConfigProvider } from 'antd';\n\nexport default () => (\n <StyleProvider layer>\n <ConfigProvider>\n <MyApp />\n </ConfigProvider>\n </StyleProvider>\n);\n",paraId:20,tocIndex:3},{value:"antd \u7684\u6837\u5F0F\u4F1A\u88AB\u5C01\u88C5\u5728 ",paraId:21,tocIndex:3},{value:"@layer",paraId:21,tocIndex:3},{value:" \u4E2D\uFF0C\u4EE5\u964D\u4F4E\u4F18\u5148\u7EA7\uFF1A",paraId:21,tocIndex:3},{value:"++ @layer antd {\n :where(.css-bAMboO).ant-btn {\n color: #fff;\n }\n++ }\n",paraId:22,tocIndex:3},{value:"\u5728\u54CD\u5E94\u5F0F\u7F51\u9875\u5F00\u53D1\u4E2D\uFF0C\u9700\u8981\u4E00\u79CD\u65B9\u4FBF\u4E14\u7075\u6D3B\u7684\u65B9\u5F0F\u6765\u5B9E\u73B0\u9875\u9762\u7684\u9002\u914D\u548C\u54CD\u5E94\u5F0F\u8BBE\u8BA1\u3002",paraId:23,tocIndex:4},{value:"px2remTransformer",paraId:23,tocIndex:4},{value:" \u8F6C\u6362\u5668\u53EF\u4EE5\u5FEB\u901F\u800C\u51C6\u786E\u5730\u5C06\u6837\u5F0F\u8868\u4E2D\u7684\u50CF\u7D20\u5355\u4F4D\u8F6C\u6362\u4E3A\u76F8\u5BF9\u4E8E\u6839\u5143\u7D20\uFF08HTML \u6807\u7B7E\uFF09\u7684 rem \u5355\u4F4D\uFF0C\u5B9E\u73B0\u9875\u9762\u7684\u81EA\u9002\u5E94\u548C\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002",paraId:23,tocIndex:4},{value:"import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';\n\nconst px2rem = px2remTransformer({\n rootValue: 32, // 32px = 1rem; @default 16\n});\n\nexport default () => (\n <StyleProvider transformers={[px2rem]}>\n <MyApp />\n </StyleProvider>\n);\n",paraId:24,tocIndex:4},{value:"\u6700\u7EC8\u8F6C\u6362\u540E\u7684\u6837\u5F0F\uFF1A",paraId:25,tocIndex:4},{value:" .px2rem-box {\n- width: 400px;\n+ width: 12.5rem;\n background-color: green;\n- font-size: 32px;\n+ font-size: 1rem;\n border: 10PX solid #f0f;\n }\n\n @media only screen and (max-width: 600px) {\n .px2rem-box {\n background-color: red;\n- margin: 10px;\n+ margin: 0.3125rem;\n }\n }\n",paraId:26,tocIndex:4},{value:"\u53C2\u6570",paraId:27,tocIndex:5},{value:"\u8BF4\u660E",paraId:27,tocIndex:5},{value:"\u7C7B\u578B",paraId:27,tocIndex:5},{value:"\u9ED8\u8BA4\u503C",paraId:27,tocIndex:5},{value:"rootValue",paraId:27,tocIndex:5},{value:"\u6839\u5143\u7D20\u5B57\u4F53\u5927\u5C0F",paraId:27,tocIndex:5},{value:"number",paraId:27,tocIndex:5},{value:"16",paraId:27,tocIndex:5},{value:"precision",paraId:27,tocIndex:5},{value:"\u8F6C\u6362\u540E\u7684\u5C0F\u6570\u70B9\u4F4D\u6570",paraId:27,tocIndex:5},{value:"number",paraId:27,tocIndex:5},{value:"5",paraId:27,tocIndex:5},{value:"mediaQuery",paraId:27,tocIndex:5},{value:"\u662F\u5426\u8F6C\u6362\u5A92\u4F53\u67E5\u8BE2\u4E2D\u7684 px",paraId:27,tocIndex:5},{value:"boolean",paraId:27,tocIndex:5},{value:"false",paraId:27,tocIndex:5},{value:"\u8BE6\u7EC6\u8BF7\u53C2\u8003: ",paraId:28,tocIndex:5},{value:"px2rem.ts#Options",paraId:28,tocIndex:5},{value:"\u5728 Shadow DOM \u573A\u666F\u4E2D\uFF0C\u7531\u4E8E\u5176\u6DFB\u52A0 ",paraId:29,tocIndex:6},{value:"<style />",paraId:29,tocIndex:6},{value:" \u6807\u7B7E\u7684\u65B9\u5F0F\u4E0E\u666E\u901A DOM \u4E0D\u540C\uFF0C\u6240\u4EE5\u9700\u8981\u4F7F\u7528 ",paraId:29,tocIndex:6},{value:"@ant-design/cssinjs",paraId:29,tocIndex:6},{value:" \u7684 ",paraId:29,tocIndex:6},{value:"StyleProvider",paraId:29,tocIndex:6},{value:" \u914D\u7F6E ",paraId:29,tocIndex:6},{value:"container",paraId:29,tocIndex:6},{value:" \u5C5E\u6027\u7528\u4E8E\u8BBE\u7F6E\u63D2\u5165\u4F4D\u7F6E\uFF1A",paraId:29,tocIndex:6},{value:"import { StyleProvider } from '@ant-design/cssinjs';\nimport { createRoot } from 'react-dom/client';\n\nconst shadowRoot = someEle.attachShadow({ mode: 'open' });\nconst container = document.createElement('div');\nshadowRoot.appendChild(container);\nconst root = createRoot(container);\n\nroot.render(\n <StyleProvider container={shadowRoot}>\n <MyApp />\n </StyleProvider>,\n);\n",paraId:30,tocIndex:6},{value:"\u5728\u67D0\u4E9B\u60C5\u51B5\u4E0B\uFF0C\u4F60\u53EF\u80FD\u9700\u8981 antd \u4E0E\u5176\u4ED6\u6837\u5F0F\u5E93\u5171\u5B58\uFF0C\u6BD4\u5982 ",paraId:31,tocIndex:7},{value:"Tailwind CSS",paraId:31,tocIndex:7},{value:"\u3001",paraId:31,tocIndex:7},{value:"Emotion",paraId:31,tocIndex:7},{value:"\u3001",paraId:31,tocIndex:7},{value:"styled-components",paraId:31,tocIndex:7},{value:" \u7B49\u3002\u4E0D\u540C\u4E8E\u4F20\u7EDF CSS \u65B9\u6848\uFF0C\u8FD9\u4E9B\u4E09\u65B9\u5E93\u5F80\u5F80\u4E0D\u592A\u5BB9\u6613\u901A\u8FC7\u63D0\u5347 CSS \u9009\u62E9\u5668\u4F18\u5148\u7EA7\u7684\u65B9\u5F0F\u8986\u76D6 antd \u7684\u6837\u5F0F\u3002\u4F60\u53EF\u4EE5\u901A\u8FC7\u4E3A antd \u914D\u7F6E ",paraId:31,tocIndex:7},{value:"@layer",paraId:31,tocIndex:7},{value:" \u964D\u4F4E\u5176 CSS \u9009\u62E9\u5668\u6743\u91CD\uFF0C\u540C\u65F6\u901A\u8FC7\u5408\u7406\u5B89\u6392 ",paraId:31,tocIndex:7},{value:"@layer",paraId:31,tocIndex:7},{value:" \u987A\u5E8F\u6765\u89E3\u51B3\u6837\u5F0F\u8986\u76D6\u95EE\u9898\uFF1A",paraId:31,tocIndex:7},{value:"@layer",paraId:3},{value:"\u5982\u524D\u6240\u8FF0\uFF0C\u4F7F\u7528 StyleProvider \u65F6\u5FC5\u987B\u5305\u88F9 ConfigProvider \u4EE5\u66F4\u65B0\u56FE\u6807\u76F8\u5173\u6837\u5F0F\uFF1A",paraId:32,tocIndex:8},{value:"import { StyleProvider } from '@ant-design/cssinjs';\n\nexport default () => (\n <StyleProvider layer>\n <ConfigProvider>\n <MyApp />\n </ConfigProvider>\n </StyleProvider>\n);\n",paraId:33,tocIndex:8},{value:"@layer",paraId:3},{value:"\u5728\u5F00\u59CB\u4EE5\u4E0B\u914D\u7F6E\u524D\uFF0C\u4F60\u9700\u8981\u5148\u542F\u7528 ",paraId:34,tocIndex:9},{value:"@layer",paraId:35,tocIndex:9},{value:" \u529F\u80FD\u3002",paraId:34,tocIndex:9},{value:"\u5728 global.css \u4E2D\uFF0C\u8C03\u6574 ",paraId:36,tocIndex:10},{value:"@layer",paraId:36,tocIndex:10},{value:" \u6765\u63A7\u5236\u6837\u5F0F\u7684\u8986\u76D6\u987A\u5E8F\u3002\u8BA9 ",paraId:36,tocIndex:10},{value:"tailwind-base",paraId:36,tocIndex:10},{value:" \u7F6E\u4E8E ",paraId:36,tocIndex:10},{value:"antd",paraId:36,tocIndex:10},{value:" \u4E4B\u524D\uFF1A",paraId:36,tocIndex:10},{value:"@layer tailwind-base, antd;\n\n@layer tailwind-base {\n @tailwind base;\n}\n@tailwind components;\n@tailwind utilities;\n",paraId:37,tocIndex:10},{value:"\u5728 global.css \u4E2D\uFF0C\u8C03\u6574 ",paraId:38,tocIndex:11},{value:"@layer",paraId:38,tocIndex:11},{value:" \u6765\u63A7\u5236\u6837\u5F0F\u7684\u8986\u76D6\u987A\u5E8F\uFF0C\u8BA9 ",paraId:38,tocIndex:11},{value:"antd",paraId:38,tocIndex:11},{value:" \u7F6E\u4E8E\u6070\u5F53\u4F4D\u7F6E\uFF1A",paraId:38,tocIndex:11},{value:"@layer theme, base, antd, components, utilities;\n\n@import 'tailwindcss';\n",paraId:39,tocIndex:11},{value:"\u5982\u679C\u4F60\u4F7F\u7528\u4E86 antd \u7684 ",paraId:40,tocIndex:12},{value:"reset.css",paraId:40,tocIndex:12},{value:" \u6837\u5F0F\uFF0C\u4F60\u9700\u8981\u4E3A\u5176\u4E5F\u6307\u5B9A ",paraId:40,tocIndex:12},{value:"@layer",paraId:40,tocIndex:12},{value:" \u4EE5\u9632\u6B62\u5C06 antd \u964D\u6743\u7684\u6837\u5F0F\u8986\u76D6\uFF1A",paraId:40,tocIndex:12},{value:"@layer reset, antd;\n\n@import url(reset.css) layer(reset);\n",paraId:41,tocIndex:12},{value:"\u5F53\u4F60\u4E3A antd \u914D\u7F6E\u5B8C ",paraId:42,tocIndex:13},{value:"@layer",paraId:42,tocIndex:13},{value:" \u540E\uFF0C\u4F60\u4E0D\u9700\u8981\u4E3A\u5176\u4ED6\u7684 CSS-in-JS \u5E93\u505A\u4EFB\u4F55\u989D\u5916\u7684\u914D\u7F6E\u3002\u4F60\u7684 CSS-in-JS \u5DF2\u7ECF\u53EF\u4EE5\u5B8C\u5168\u8986\u76D6 antd \u7684\u6837\u5F0F\u4E86\u3002",paraId:42,tocIndex:13},{value:"\u5728 SSR \u573A\u666F\u4E0B\uFF0C\u6837\u5F0F\u5F80\u5F80\u4F1A\u901A\u8FC7 ",paraId:43,tocIndex:14},{value:"<style />",paraId:43,tocIndex:14},{value:" \u5185\u8054\u6E32\u67D3\u5230 HTML \u4E2D\u3002\u6B64\u65F6\u8BF7\u52A1\u5FC5\u786E\u4FDD\u4F60\u7684\u6837\u5F0F\u987A\u5E8F\u4E2D\u6307\u5B9A ",paraId:43,tocIndex:14},{value:"@layer",paraId:43,tocIndex:14},{value:" \u4F18\u5148\u7EA7\u987A\u5E8F\u7684\u6837\u5F0F\u5728 ",paraId:43,tocIndex:14},{value:"@layer",paraId:43,tocIndex:14},{value:" \u88AB\u4F7F\u7528\u4E4B\u524D\u88AB\u52A0\u8F7D\u3002",paraId:43,tocIndex:14},{value:'<head>\n <!-- SSR \u6CE8\u5165\u6837\u5F0F -->\n <style>\n @layer antd {\n /** ... */\n }\n </style>\n\n <!-- css \u6587\u4EF6\u4E2D\u5305\u542B @layer xxx, antd; -->\n <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />\n <!-- or \u76F4\u63A5\u4E66\u5199 @layer xxx, antd; \u5728 html \u4E2D -->\n <style>\n @layer xxx, antd;\n </style>\n</head>\n',paraId:44,tocIndex:15},{value:'<head>\n <!-- css \u6587\u4EF6\u4E2D\u5305\u542B @layer xxx, antd; -->\n <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />\n <!-- or \u76F4\u63A5\u4E66\u5199 @layer xxx, antd; \u5728 html \u4E2D -->\n <style>\n @layer xxx, antd;\n </style>\n\n <!-- SSR \u6CE8\u5165\u6837\u5F0F -->\n <style>\n @layer antd {\n /** ... */\n }\n </style>\n</head>\n',paraId:45,tocIndex:16}];},cb1b2e83:function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"default",{enumerable:!0,get:function(){return u;}});var d=t("777fffbe"),l=t("f19d2b93"),n=d._(t("b622e337")),s=d._(t("67074e5d")),r=d._(t("97c488ea")),c=d._(t("c96b0d01")),x=t("5b220c3d"),o=t("9c86e52a"),i=t("a99d4e5b"),u=function(){return(0,l.jsx)(o.DumiPage,{children:(0,l.jsx)(x.Suspense,{fallback:(0,l.jsx)(c.default,{}),children:(0,l.jsx)(l.Fragment,{children:(0,l.jsxs)("div",{className:"markdown",children:[(0,l.jsxs)("h2",{id:"\u9ED8\u8BA4\u6837\u5F0F\u517C\u5BB9\u6027\u8BF4\u660E",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u9ED8\u8BA4\u6837\u5F0F\u517C\u5BB9\u6027\u8BF4\u660E",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"\u9ED8\u8BA4\u6837\u5F0F\u517C\u5BB9\u6027\u8BF4\u660E"]}),(0,l.jsxs)("p",{children:[i.texts[0].value,(0,l.jsx)(r.default,{href:"https://browsersl.ist/#q=defaults",sourceType:"a",children:i.texts[1].value}),i.texts[2].value]}),(0,l.jsxs)(s.default,{children:[(0,l.jsx)("thead",{children:(0,l.jsxs)("tr",{children:[(0,l.jsx)("th",{children:i.texts[3].value}),(0,l.jsx)("th",{children:i.texts[4].value}),(0,l.jsx)("th",{children:i.texts[5].value}),(0,l.jsx)("th",{children:i.texts[6].value}),(0,l.jsx)("th",{children:i.texts[7].value})]})}),(0,l.jsxs)("tbody",{children:[(0,l.jsxs)("tr",{children:[(0,l.jsx)("td",{children:(0,l.jsx)(r.default,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:where",sourceType:"a",children:i.texts[8].value})}),(0,l.jsx)("td",{children:(0,l.jsx)("code",{children:i.texts[9].value})}),(0,l.jsx)("td",{children:(0,l.jsx)(r.default,{href:"https://caniuse.com/?search=%3Awhere",sourceType:"a",children:i.texts[10].value})}),(0,l.jsx)("td",{children:i.texts[11].value}),(0,l.jsx)("td",{children:(0,l.jsx)("code",{children:i.texts[12].value})})]}),(0,l.jsxs)("tr",{children:[(0,l.jsx)("td",{children:(0,l.jsx)(r.default,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties",sourceType:"a",children:i.texts[13].value})}),(0,l.jsx)("td",{children:(0,l.jsx)("code",{children:i.texts[14].value})}),(0,l.jsx)("td",{children:(0,l.jsx)(r.default,{href:"https://caniuse.com/css-logical-props",sourceType:"a",children:i.texts[15].value})}),(0,l.jsx)("td",{children:i.texts[16].value}),(0,l.jsx)("td",{children:(0,l.jsx)("code",{children:i.texts[17].value})})]})]})]}),(0,l.jsxs)("p",{children:[i.texts[18].value,(0,l.jsx)(r.default,{href:"https://github.com/ant-design/cssinjs#styleprovider",sourceType:"a",children:i.texts[19].value}),i.texts[20].value]}),(0,l.jsxs)("h2",{id:"where-\u9009\u62E9\u5668",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#where-\u9009\u62E9\u5668",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),(0,l.jsx)("code",{children:i.texts[21].value})," \u9009\u62E9\u5668"]}),(0,l.jsxs)("ul",{children:[(0,l.jsxs)("li",{children:[i.texts[22].value,(0,l.jsx)("code",{children:i.texts[23].value})]}),(0,l.jsxs)("li",{children:[i.texts[24].value,(0,l.jsx)(r.default,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:where",sourceType:"a",children:i.texts[25].value})]}),(0,l.jsxs)("li",{children:[i.texts[26].value,(0,l.jsx)(r.default,{href:"https://caniuse.com/?search=%3Awhere",sourceType:"a",children:i.texts[27].value})]}),(0,l.jsx)("li",{children:i.texts[28].value}),(0,l.jsx)("li",{children:i.texts[29].value})]}),(0,l.jsxs)("p",{children:[i.texts[30].value,(0,l.jsx)("code",{children:i.texts[31].value}),i.texts[32].value,(0,l.jsx)("code",{children:i.texts[33].value}),i.texts[34].value,(0,l.jsx)(r.default,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility",sourceType:"a",children:i.texts[35].value}),i.texts[36].value,(0,l.jsx)("code",{children:i.texts[37].value}),i.texts[38].value]}),(0,l.jsx)(n.default,{lang:"tsx",children:i.texts[39].value}),(0,l.jsxs)("p",{children:[i.texts[40].value,(0,l.jsx)("code",{children:i.texts[41].value}),i.texts[42].value]}),(0,l.jsx)(n.default,{lang:"diff",children:i.texts[43].value}),(0,l.jsxs)("p",{children:[i.texts[44].value,(0,l.jsx)("code",{children:i.texts[45].value}),i.texts[46].value,(0,l.jsx)("strong",{children:i.texts[47].value}),i.texts[48].value]}),(0,l.jsxs)("ul",{children:[(0,l.jsx)("li",{children:(0,l.jsx)(r.default,{href:"https://www.npmjs.com/package/postcss-scopify",sourceType:"a",children:i.texts[49].value})}),(0,l.jsx)("li",{children:(0,l.jsx)(r.default,{href:"https://www.npmjs.com/package/postcss-increase-specificity",sourceType:"a",children:i.texts[50].value})}),(0,l.jsx)("li",{children:(0,l.jsx)(r.default,{href:"https://www.npmjs.com/package/postcss-add-root-selector",sourceType:"a",children:i.texts[51].value})})]}),(0,l.jsx)("p",{children:i.texts[52].value}),(0,l.jsx)(n.default,{lang:"diff",children:i.texts[53].value}),(0,l.jsxs)("h2",{id:"css-\u903B\u8F91\u5C5E\u6027",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#css-\u903B\u8F91\u5C5E\u6027",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"CSS \u903B\u8F91\u5C5E\u6027"]}),(0,l.jsxs)("ul",{children:[(0,l.jsxs)("li",{children:[i.texts[54].value,(0,l.jsx)("code",{children:i.texts[55].value})]}),(0,l.jsxs)("li",{children:[i.texts[56].value,(0,l.jsx)(r.default,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties",sourceType:"a",children:i.texts[57].value})]}),(0,l.jsxs)("li",{children:[i.texts[58].value,(0,l.jsx)(r.default,{href:"https://caniuse.com/css-logical-props",sourceType:"a",children:i.texts[59].value})]}),(0,l.jsx)("li",{children:i.texts[60].value}),(0,l.jsx)("li",{children:i.texts[61].value})]}),(0,l.jsxs)("p",{children:[i.texts[62].value,(0,l.jsx)("code",{children:i.texts[63].value}),i.texts[64].value,(0,l.jsx)("code",{children:i.texts[65].value}),i.texts[66].value,(0,l.jsx)("code",{children:i.texts[67].value}),i.texts[68].value,(0,l.jsx)("code",{children:i.texts[69].value}),i.texts[70].value,(0,l.jsx)("code",{children:i.texts[71].value}),i.texts[72].value]}),(0,l.jsx)(n.default,{lang:"tsx",children:i.texts[73].value}),(0,l.jsx)("p",{children:i.texts[74].value}),(0,l.jsx)(n.default,{lang:"diff",children:i.texts[75].value}),(0,l.jsxs)("h2",{id:"layer-\u6837\u5F0F\u4F18\u5148\u7EA7\u964D\u6743",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#layer-\u6837\u5F0F\u4F18\u5148\u7EA7\u964D\u6743",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),(0,l.jsx)("code",{children:i.texts[76].value})," \u6837\u5F0F\u4F18\u5148\u7EA7\u964D\u6743"]}),(0,l.jsxs)("ul",{children:[(0,l.jsxs)("li",{children:[i.texts[77].value,(0,l.jsx)("code",{children:i.texts[78].value})]}),(0,l.jsxs)("li",{children:[i.texts[79].value,(0,l.jsx)(r.default,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@layer",sourceType:"a",children:i.texts[80].value})]}),(0,l.jsxs)("li",{children:[i.texts[81].value,(0,l.jsx)(r.default,{href:"https://caniuse.com/?search=%40layer",sourceType:"a",children:i.texts[82].value})]}),(0,l.jsx)("li",{children:i.texts[83].value}),(0,l.jsx)("li",{children:i.texts[84].value})]}),(0,l.jsxs)("p",{children:[i.texts[85].value,(0,l.jsx)("code",{children:i.texts[86].value}),i.texts[87].value,(0,l.jsx)("code",{children:i.texts[88].value}),i.texts[89].value,(0,l.jsx)("code",{children:i.texts[90].value}),i.texts[91].value,(0,l.jsx)("code",{children:i.texts[92].value}),i.texts[93].value,(0,l.jsx)("strong",{children:i.texts[94].value}),i.texts[95].value]}),(0,l.jsx)(n.default,{lang:"tsx",children:i.texts[96].value}),(0,l.jsxs)("p",{children:[i.texts[97].value,(0,l.jsx)("code",{children:i.texts[98].value}),i.texts[99].value]}),(0,l.jsx)(n.default,{lang:"diff",children:i.texts[100].value}),(0,l.jsxs)("h2",{id:"rem-\u9002\u914D",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#rem-\u9002\u914D",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"rem \u9002\u914D"]}),(0,l.jsxs)("p",{children:[i.texts[101].value,(0,l.jsx)("code",{children:i.texts[102].value}),i.texts[103].value]}),(0,l.jsx)(n.default,{lang:"tsx",children:i.texts[104].value}),(0,l.jsx)("p",{children:i.texts[105].value}),(0,l.jsx)(n.default,{lang:"diff",children:i.texts[106].value}),(0,l.jsxs)("h3",{id:"\u914D\u7F6E\u9879",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u914D\u7F6E\u9879",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"\u914D\u7F6E\u9879"]}),(0,l.jsxs)(s.default,{children:[(0,l.jsx)("thead",{children:(0,l.jsxs)("tr",{children:[(0,l.jsx)("th",{children:i.texts[107].value}),(0,l.jsx)("th",{children:i.texts[108].value}),(0,l.jsx)("th",{children:i.texts[109].value}),(0,l.jsx)("th",{children:i.texts[110].value})]})}),(0,l.jsxs)("tbody",{children:[(0,l.jsxs)("tr",{children:[(0,l.jsx)("td",{children:i.texts[111].value}),(0,l.jsx)("td",{children:i.texts[112].value}),(0,l.jsx)("td",{children:(0,l.jsx)("code",{children:i.texts[113].value})}),(0,l.jsx)("td",{children:i.texts[114].value})]}),(0,l.jsxs)("tr",{children:[(0,l.jsx)("td",{children:i.texts[115].value}),(0,l.jsx)("td",{children:i.texts[116].value}),(0,l.jsx)("td",{children:(0,l.jsx)("code",{children:i.texts[117].value})}),(0,l.jsx)("td",{children:i.texts[118].value})]}),(0,l.jsxs)("tr",{children:[(0,l.jsx)("td",{children:i.texts[119].value}),(0,l.jsx)("td",{children:i.texts[120].value}),(0,l.jsx)("td",{children:(0,l.jsx)("code",{children:i.texts[121].value})}),(0,l.jsx)("td",{children:i.texts[122].value})]})]})]}),(0,l.jsxs)("p",{children:[i.texts[123].value,(0,l.jsx)(r.default,{href:"https://github.com/ant-design/cssinjs/blob/master/src/transformers/px2rem.ts",sourceType:"a",children:i.texts[124].value})]}),(0,l.jsxs)("h2",{id:"shadow-dom-\u573A\u666F",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#shadow-dom-\u573A\u666F",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"Shadow DOM \u573A\u666F"]}),(0,l.jsxs)("p",{children:[i.texts[125].value,(0,l.jsx)("code",{children:i.texts[126].value}),i.texts[127].value,(0,l.jsx)("code",{children:i.texts[128].value}),i.texts[129].value,(0,l.jsx)("code",{children:i.texts[130].value}),i.texts[131].value,(0,l.jsx)("code",{children:i.texts[132].value}),i.texts[133].value]}),(0,l.jsx)(n.default,{lang:"tsx",children:i.texts[134].value}),(0,l.jsxs)("h2",{id:"\u517C\u5BB9\u4E09\u65B9\u6837\u5F0F\u5E93",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u517C\u5BB9\u4E09\u65B9\u6837\u5F0F\u5E93",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"\u517C\u5BB9\u4E09\u65B9\u6837\u5F0F\u5E93"]}),(0,l.jsxs)("p",{children:[i.texts[135].value,(0,l.jsx)("code",{children:i.texts[136].value}),i.texts[137].value,(0,l.jsx)("code",{children:i.texts[138].value}),i.texts[139].value,(0,l.jsx)("code",{children:i.texts[140].value}),i.texts[141].value,(0,l.jsx)("code",{children:i.texts[142].value}),i.texts[143].value,(0,l.jsx)("code",{children:i.texts[144].value}),i.texts[145].value]}),(0,l.jsxs)("h3",{id:"antd-\u914D\u7F6E-layer",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#antd-\u914D\u7F6E-layer",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"antd \u914D\u7F6E ",(0,l.jsx)("code",{children:i.texts[146].value})]}),(0,l.jsx)("p",{children:i.texts[147].value}),(0,l.jsx)(n.default,{lang:"tsx",children:i.texts[148].value}),(0,l.jsxs)("h3",{id:"tailwindcss-\u6392\u5E03-layer",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#tailwindcss-\u6392\u5E03-layer",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"TailwindCSS \u6392\u5E03 ",(0,l.jsx)("code",{children:i.texts[149].value})]}),(0,l.jsxs)("p",{children:[i.texts[150].value,(0,l.jsx)(r.default,{to:"#layer-%E6%A0%B7%E5%BC%8F%E4%BC%98%E5%85%88%E7%BA%A7%E9%99%8D%E6%9D%83",sourceType:"Link",children:(0,l.jsx)("code",{children:i.texts[151].value})}),i.texts[152].value]}),(0,l.jsxs)("h4",{id:"tailwindcss-v3",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#tailwindcss-v3",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"TailwindCSS v3"]}),(0,l.jsxs)("p",{children:[i.texts[153].value,(0,l.jsx)("code",{children:i.texts[154].value}),i.texts[155].value,(0,l.jsx)("code",{children:i.texts[156].value}),i.texts[157].value,(0,l.jsx)("code",{children:i.texts[158].value}),i.texts[159].value]}),(0,l.jsx)(n.default,{lang:"less",children:i.texts[160].value}),(0,l.jsxs)("h4",{id:"tailwindcss-v4",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#tailwindcss-v4",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"TailwindCSS v4"]}),(0,l.jsxs)("p",{children:[i.texts[161].value,(0,l.jsx)("code",{children:i.texts[162].value}),i.texts[163].value,(0,l.jsx)("code",{children:i.texts[164].value}),i.texts[165].value]}),(0,l.jsx)(n.default,{lang:"less",children:i.texts[166].value}),(0,l.jsxs)("h3",{id:"resetcss",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#resetcss",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"reset.css"]}),(0,l.jsxs)("p",{children:[i.texts[167].value,(0,l.jsx)("code",{children:i.texts[168].value}),i.texts[169].value,(0,l.jsx)("code",{children:i.texts[170].value}),i.texts[171].value]}),(0,l.jsx)(n.default,{lang:"less",children:i.texts[172].value}),(0,l.jsxs)("h3",{id:"\u5176\u4ED6-css-in-js-\u5E93",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u5176\u4ED6-css-in-js-\u5E93",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"\u5176\u4ED6 CSS-in-JS \u5E93"]}),(0,l.jsxs)("p",{children:[i.texts[173].value,(0,l.jsx)("code",{children:i.texts[174].value}),i.texts[175].value]}),(0,l.jsxs)("h3",{id:"ssr-\u573A\u666F",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#ssr-\u573A\u666F",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"SSR \u573A\u666F"]}),(0,l.jsxs)("p",{children:[i.texts[176].value,(0,l.jsx)("code",{children:i.texts[177].value}),i.texts[178].value,(0,l.jsx)("code",{children:i.texts[179].value}),i.texts[180].value,(0,l.jsx)("code",{children:i.texts[181].value}),i.texts[182].value]}),(0,l.jsxs)("h4",{id:"-\u9519\u8BEF\u7684\u5199\u6CD5",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-\u9519\u8BEF\u7684\u5199\u6CD5",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"\u274C \u9519\u8BEF\u7684\u5199\u6CD5"]}),(0,l.jsx)(n.default,{lang:"html",children:i.texts[183].value}),(0,l.jsxs)("h4",{id:"-\u6B63\u786E\u7684\u5199\u6CD5",children:[(0,l.jsx)(r.default,{"aria-hidden":"true",tabIndex:"-1",href:"#-\u6B63\u786E\u7684\u5199\u6CD5",sourceType:"a",children:(0,l.jsx)("span",{className:"icon icon-link"})}),"\u2705 \u6B63\u786E\u7684\u5199\u6CD5"]}),(0,l.jsx)(n.default,{lang:"html",children:i.texts[184].value})]})})})});};}}]);
Reference in New Issue View Git Blame Copy Permalink