ant-design/fa14b010-async.c88c0628.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["fa14b010"],{"48a0e601":function(e,t,n){"use strict";n.d(t,"__esModule",{value:!0}),n.d(t,"texts",{enumerable:!0,get:function(){return s;}}),n("2c829861");let s=[{value:"Ant Design v6 \u7684\u5F00\u53D1\u8FC7\u7A0B\u4E2D\uFF0C\u7531\u4E8E\u4E0D\u9700\u8981\u518D\u8003\u8651 IE \u7684\u517C\u5BB9\u95EE\u9898\uFF0C\u6211\u4EEC\u5BF9\u90E8\u5206\u7EC4\u4EF6\u6539\u9020\u4F7F\u7528\u4E86 CSS \u53D8\u91CF\u83B7\u5F97\u4E86\u66F4\u5C0F\u7684 CSS \u4F53\u79EF\u4EE5\u53CA\u66F4\u597D\u7684\u6027\u80FD\u3002\u4ECA\u5929\u6211\u4EEC\u6765\u804A\u804A CSS \u53D8\u91CF\u7684\u4E00\u4E9B\u5C0F\u4E8B\u3002",paraId:0},{value:"\u5728 v5 \u4E2D\u4E00\u4E9B\u7EC4\u4EF6\u652F\u6301 ",paraId:1,tocIndex:0},{value:"variant",paraId:1,tocIndex:0},{value:" \u5C5E\u6027\u6765\u5B9E\u73B0\u4E0D\u540C\u7684\u6837\u5F0F\uFF0CButton \u7EC4\u4EF6\u5C31\u662F\u4E00\u4E2A\u5178\u578B\u4F8B\u5B50\uFF1A",paraId:1,tocIndex:0},{value:"(\u914D\u5408 ",paraId:2,tocIndex:0},{value:"color",paraId:2,tocIndex:0},{value:" \u5B9E\u73B0\u4E86\u4E0D\u540C\u7684\u6309\u94AE\u7EC4\u5408)",paraId:2,tocIndex:0},{value:"\u5728 v5 \u4E2D\uFF0CButton \u7684\u53D8\u4F53\u4E0E\u989C\u8272\u7EC4\u5408\u4F1A\u521B\u5EFA\u4E00\u5957\u91CD\u590D\u7684\u6392\u5217\u7EC4\u5408\u6837\u5F0F\uFF1A",paraId:3,tocIndex:0},{value:"/* Sample code. Not used in real world. */\n.ant-btn-solid.ant-btn-red {\n  color: #fff;\n  background: red;\n}\n\n.ant-btn-solid.ant-btn-blue {\n  color: #fff;\n  background: blue;\n}\n\n.ant-btn-outlined.ant-btn-red {\n  color: #fff;\n  border: 1px solid red;\n}\n\n.ant-btn-outlined.ant-btn-blue {\n  color: #fff;\n  border: 1px solid blue;\n}\n\n/* ... */\n",paraId:4,tocIndex:0},{value:"\u8F6C\u6362\u6210 CSS \u53D8\u91CF\u540E\uFF0C\u903B\u8F91\u5C31\u4F1A\u4ECE\u6837\u5F0F\u8F6C\u6210\u5BF9\u8272\u677F\u7684\u63A7\u5236\u3002\u56E0\u800C\u5728\u5B9A\u4E49\u5B8C\u4E00\u5957\u57FA\u7840\u8272\u677F\u540E\uFF0C\u5C31\u53EF\u4EE5\u901A\u8FC7\u53D8\u91CF\u7B80\u5355\u7684\u91CF\u4EA7\u6837\u5F0F\uFF1A",paraId:5,tocIndex:0},{value:"/* Sample code. Not used in real world. */\n/* Template Part */\n.ant-btn {\n  color: var(--ant-btn-color);\n  background: var(--ant-btn-background);\n  border-color: var(--ant-btn-border-color);\n  border-width: 1px;\n  border-style: solid;\n}\n\n.ant-btn-solid {\n  --ant-btn-color: #fff;\n  --ant-btn-background: var(--ant-color-solid);\n}\n\n.ant-btn-outlined {\n  --ant-btn-color: var(--ant-color-solid);\n  --ant-btn-border-color: var(--ant-color-solid);\n}\n\n/* CSS Variables. The more color you have, the more size to save. */\n.ant-btn-red {\n  --ant-color-solid: red;\n}\n\n.ant-btn-blue {\n  --ant-color-solid: blue;\n}\n\n/* ... */\n",paraId:6,tocIndex:0},{value:"\u5728 CSS \u53D8\u91CF\u4E0B\uFF0C\u7528\u6237\u4FA7\u7684\u6837\u5F0F\u8986\u76D6\u4E5F\u53D8\u5F97\u66F4\u7B80\u5355\u4E86\u3002\u8FC7\u53BB\u5F00\u53D1\u8005\u8986\u76D6\u4E00\u4E2A\u6837\u5F0F\u9700\u8981\u5BF9\u5404\u4E2A\u72B6\u6001\u8FDB\u884C\u8986\u76D6\uFF0C\u540C\u65F6\u8FD8\u9700\u8981\u8003\u8651\u4F18\u5148\u7EA7\u8986\u76D6\u7684\u60C5\u51B5\uFF1A",paraId:7,tocIndex:1},{value:".ant-btn-solid.my-btn:not(:disabled) {\n  background: #f00;\n}\n\n.ant-btn-solid.my-btn:not(:disabled):hover {\n  background: #e00;\n}\n\n.ant-btn-solid.my-btn:not(:disabled):active {\n  background: #d00;\n}\n\n.ant-btn-outlined.my-btn:not(:disabled) {\n  color: #f00;\n  border-color: #f00;\n}\n\n.ant-btn-outlined.my-btn:not(:disabled):hover {\n  color: #e00;\n  border-color: #e00;\n}\n\n.ant-btn-outlined.my-btn:not(:disabled):active {\n  color: #d00;\n  border-color: #d00;\n}\n",paraId:8,tocIndex:1},{value:"\u800C\u8986\u76D6 CSS \u53D8\u91CF\u5219\u7B80\u5355\u5F88\u591A\uFF1A",paraId:9,tocIndex:1},{value:".ant-btn-outlined.my-btn {\n  --ant-color-solid: #f00;\n  --ant-color-solid-hover: #e00;\n  --ant-color-solid-active: #d00;\n}\n",paraId:10,tocIndex:1},{value:"v6 \u4E3A\u4E86\u5B9E\u73B0\u8BED\u4E49\u5316\u7ED3\u6784\uFF0C\u6211\u4EEC\u5BF9\u5927\u91CF\u7EC4\u4EF6\u7684 DOM \u7ED3\u6784\u8FDB\u884C\u4E86\u8C03\u6574\uFF0C\u540C\u65F6\u4E5F\u5C06 v4 \u81F3 v5 \u8FC1\u79FB\u65F6\u7684 less \u53D8\u91CF\u517C\u5BB9\u63D0\u4F9B\u7684\u5BF9\u5E94 Component Token \u8FDB\u884C\u4E86\u6E05\u7406\uFF08\u66F4\u591A\u7684\u6570\u503C\u901A\u8FC7\u8BA1\u7B97\u751F\u6210\u800C\u4E0D\u662F\u8BA9\u5F00\u53D1\u8005\u624B\u5DE5\u6765\u914D\u7F6E\uFF09\u3002\u4F46\u662F\u4E3A\u4E86\u907F\u514D\u5BF9\u73B0\u6709\u7528\u6237\u9020\u6210\u5F71\u54CD\uFF0C\u6211\u4EEC\u662F\u5E0C\u671B\u5C3D\u53EF\u80FD\u7684\u517C\u5BB9\u3002",paraId:11,tocIndex:2},{value:"\u5176\u4E2D\u4E00\u4E2A\u4F8B\u5B50\u5C31\u662F\u67D0\u4E2A token \u5B58\u5728\u7684\u65F6\u5019\uFF0C\u6211\u4EEC\u4F7F\u7528\u53E6\u4E00\u79CD\u6837\u5F0F\uFF1A",paraId:12,tocIndex:2},{value:".sample {\n  color: blue;\n}\n\n/* How to if? */\nif (customVar exist) {\n  .sample {\n    color: red;\n  }\n}\n",paraId:13,tocIndex:2},{value:"\u4E00\u4E2A\u60F3\u6CD5\u662F\u5728\u7EC4\u4EF6\u4E2D\u6839\u636E token \u7684\u5B58\u5728\u4E0E\u5426\u6765\u6DFB\u52A0\u4E00\u4E2A\u989D\u5916\u7684 ",paraId:14,tocIndex:2},{value:"className",paraId:14,tocIndex:2},{value:"\uFF1A",paraId:14,tocIndex:2},{value:"const Sample = () => {\n  const { token } = useToken();\n\n  // Sad. Component token is not exist in token.\n  if (token.components.sample.customVar) {\n    // ...\n  }\n};\n",paraId:15,tocIndex:2},{value:"\u4F46\u662F\u9057\u61BE\u7684\u662F\uFF0C\u7EC4\u4EF6\u7684 token \u5728 ",paraId:16,tocIndex:2},{value:"useToken",paraId:16,tocIndex:2},{value:" \u4E2D\u5E76\u4E0D\u5B58\u5728\u3002\u5B83\u53EA\u6709\u5728\u7EC4\u4EF6\u7684\u6E32\u67D3 effect \u4E2D\u624D\u4F1A\u5F02\u6B65\u751F\u6210\u4ECE\u800C\u907F\u514D\u65E0\u7528\u7684\u6027\u80FD\u6D6A\u8D39\u3002\u56E0\u800C\u5728 CSS \u4E2D\u6761\u4EF6\u5224\u65AD\u4F1A\u662F\u4E2A\u66F4\u597D\u7684\u9009\u62E9\uFF0C\u8FD9\u91CC\u5C31\u4E0D\u5356\u5173\u5B50\u4E86\uFF0C\u4F7F\u7528 ",paraId:16,tocIndex:2},{value:"@container",paraId:16,tocIndex:2},{value:" \u4FBF\u53EF\u4EE5\u5B9E\u73B0\u6761\u4EF6\u5224\u65AD\uFF1A",paraId:16,tocIndex:2},{value:"/* Current container support css var `--custom-var` */\n@container style(--custom-var) {\n  /* ... */\n}\n",paraId:17,tocIndex:2},{value:"\u9700\u8981\u6CE8\u610F\u7684\u662F\uFF0C",paraId:18},{value:"@container",paraId:18},{value:" \u7684 CSS \u53D8\u91CF\u67E5\u8BE2\u76EE\u524D Firefox \u5C1A\u672A\u652F\u6301\u3002\u6240\u4EE5\u5728 v6 \u4E2D\uFF0C\u6211\u4EEC\u5E76\u4E0D\u4F1A\u628A\u4E3B\u8981\u7684\u529F\u80FD\u653E\u5728 ",paraId:18},{value:"@container",paraId:18},{value:" \u4E0A\uFF0C\u800C\u662F\u4F5C\u4E3A\u4E00\u4E2A\u517C\u5BB9\u515C\u5E95\u903B\u8F91\u6765\u4F7F\u7528\u3002",paraId:18},{value:"\u5982\u679C\u8BF4 CSS \u4E2D\u6700\u8BF1\u4EBA\u7684\u5C5E\u6027\u662F\u4EC0\u4E48\uFF0C\u90A3\u53EF\u80FD\u975E ",paraId:19,tocIndex:4},{value:"@scope",paraId:19,tocIndex:4},{value:" \u83AB\u5C5E\u4E86\u3002v5 \u4E2D\uFF0C\u6211\u4EEC\u4F7F\u7528 ",paraId:19,tocIndex:4},{value:":where",paraId:19,tocIndex:4},{value:" \u6765\u5B9E\u73B0 CSS \u7684\u547D\u540D\u7A7A\u95F4\uFF0C\u4ECE\u800C\u5B9E\u73B0\u591A\u4E2A\u7248\u672C\u6216\u8005\u4E3B\u9898\u7684 antd \u7EC4\u4EF6\u7684\u6837\u5F0F\u9694\u79BB\uFF1A",paraId:19,tocIndex:4},{value:"/* Theme 1 */\n:where(.css-BamBoo) {\n  .ant-btn {\n    color: red;\n  }\n}\n\n/* Theme 2 */\n:where(.css-LIghT) {\n  .ant-btn {\n    color: blue;\n  }\n}\n",paraId:20,tocIndex:4},{value:"\u4F46\u662F\u8FD9\u5BF9\u4E8E\u5D4C\u5957\u903B\u8F91\u6765\u8BF4\uFF0C\u5076\u5C14\u4F1A\u6709\u4E00\u4E9B\u95EE\u9898\u3002\u6BD4\u5982\u4E0B\u9762\u7684\u4F8B\u5B50\u4E2D\uFF0C",paraId:21,tocIndex:4},{value:"Theme1",paraId:21,tocIndex:4},{value:" \u5BF9 ",paraId:21,tocIndex:4},{value:"span",paraId:21,tocIndex:4},{value:" \u7684\u6837\u5F0F\u4F1A\u5F71\u54CD ",paraId:21,tocIndex:4},{value:"Theme2",paraId:21,tocIndex:4},{value:"\uFF1A",paraId:21,tocIndex:4},{value:"/* Theme 1 */\n:where(.css-BamBoo).component-a span {\n  color: red;\n}\n\n/* Theme 2 */\n:where(.css-LIghT).component-b {\n  color: blue;\n}\n",paraId:22,tocIndex:4},{value:'<div className="component-a css-BamBoo">\n  <div className="component-b css-LIghT">\n    <span>Hello World</span>\n  </div>\n</div>\n',paraId:23,tocIndex:4},{value:"\u800C ",paraId:24,tocIndex:4},{value:"@scope",paraId:24,tocIndex:4},{value:" \u5219\u53EF\u4EE5\u5B8C\u7F8E\u7684\u89E3\u51B3\u8FD9\u4E2A\u95EE\u9898\uFF1A",paraId:24,tocIndex:4},{value:"@scope (.component-a) to (span) {\n  /* ... */\n}\n",paraId:25,tocIndex:4},{value:"\u4F46\u662F\u540C\u6837\u7684\uFF0C",paraId:26},{value:"@scope",paraId:26},{value:" \u76EE\u524D\u4E5F\u5E76\u4E0D\u88AB Firefox \u652F\u6301\u3002\u800C\u5982\u679C\u5C06\u5176\u5E94\u7528\u4E8E v6 \u7248\u672C\uFF0C\u90A3\u5C31\u4F1A\u5BFC\u81F4 Firefox \u7528\u6237\u65E0\u6CD5\u4F7F\u7528 antd \u7EC4\u4EF6\u3002\u56E0\u800C\u6211\u4EEC\u53EF\u80FD\u4F1A\u5728\u4E0B\u4E00\u4E2A\u5927\u7248\u672C\u4E2D\u624D\u80FD\u89C1\u5230\u5B83\u7684\u8EAB\u5F71\u3002",paraId:26}];},fa14b010:function(e,t,n){"use strict";n.d(t,"__esModule",{value:!0}),n.d(t,"default",{enumerable:!0,get:function(){return p;}});var s=n("777fffbe"),r=n("f19d2b93"),a=s._(n("b622e337")),o=s._(n("97c488ea")),c=n("9c86e52a"),i=s._(n("c96b0d01")),l=n("5b220c3d"),d=n("48a0e601"),p=function(){return(0,r.jsx)(c.DumiPage,{children:(0,r.jsx)(l.Suspense,{fallback:(0,r.jsx)(i.default,{}),children:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:"markdown",children:[(0,r.jsx)("p",{children:d.texts[0].value}),(0,r.jsxs)("h2",{id:"\u53D8\u4F53",children:[(0,r.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u53D8\u4F53",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"\u53D8\u4F53"]}),(0,r.jsxs)("p",{children:[d.texts[1].value,(0,r.jsx)("code",{children:d.texts[2].value}),d.texts[3].value]}),(0,r.jsx)("p",{children:(0,r.jsx)("img",{src:"https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ApyYQpXQQfgAAAAAAAAAAAAADgCCAQ/original",alt:"Variant Button"})}),(0,r.jsxs)("p",{children:[d.texts[4].value,(0,r.jsx)("code",{children:d.texts[5].value}),d.texts[6].value]}),(0,r.jsx)("p",{children:d.texts[7].value}),(0,r.jsx)(a.default,{lang:"css",children:d.texts[8].value}),(0,r.jsx)("p",{children:d.texts[9].value}),(0,r.jsx)(a.default,{lang:"css",children:d.texts[10].value}),(0,r.jsxs)("h2",{id:"\u6837\u5F0F\u8986\u76D6",children:[(0,r.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u6837\u5F0F\u8986\u76D6",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"\u6837\u5F0F\u8986\u76D6"]}),(0,r.jsx)("p",{children:d.texts[11].value}),(0,r.jsx)(a.default,{lang:"css",children:d.texts[12].value}),(0,r.jsx)("p",{children:d.texts[13].value}),(0,r.jsx)(a.default,{lang:"css",children:d.texts[14].value}),(0,r.jsxs)("h2",{id:"\u6761\u4EF6\u517C\u5BB9",children:[(0,r.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#\u6761\u4EF6\u517C\u5BB9",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"\u6761\u4EF6\u517C\u5BB9"]}),(0,r.jsx)("p",{children:d.texts[15].value}),(0,r.jsx)("p",{children:d.texts[16].value}),(0,r.jsx)(a.default,{lang:"less",children:d.texts[17].value}),(0,r.jsxs)("p",{children:[d.texts[18].value,(0,r.jsx)("code",{children:d.texts[19].value}),d.texts[20].value]}),(0,r.jsx)(a.default,{lang:"jsx",children:d.texts[21].value}),(0,r.jsxs)("p",{children:[d.texts[22].value,(0,r.jsx)("code",{children:d.texts[23].value}),d.texts[24].value,(0,r.jsx)("code",{children:d.texts[25].value}),d.texts[26].value]}),(0,r.jsx)(a.default,{lang:"css",children:d.texts[27].value})]}),(0,r.jsx)(c.DumiDemo,{demo:{id:"docs-blog-css-tricks-demo-condition"},previewerProps:{title:"\u6761\u4EF6\u6837\u5F0F",filename:"docs/blog/css-tricks/condition.tsx",pkgDependencyList:{"@ant-design/compatible":"^5.1.3","@ant-design/happy-work-theme":"^1.0.0","@ant-design/tools":"^18.0.3","@ant-design/v5-patch-for-react-19":"^1.0.2","@antfu/eslint-config":"^4.0.0","@antv/g6":"^4.8.24","@biomejs/biome":"^1.9.4","@codecov/webpack-plugin":"^1.4.0","@codesandbox/sandpack-react":"^2.19.10","@dnd-kit/core":"^6.2.0","@dnd-kit/modifiers":"^9.0.0","@dnd-kit/sortable":"^10.0.0","@dnd-kit/utilities":"^3.2.2","@emotion/css":"^11.13.5","@emotion/react":"^11.13.5","@emotion/server":"^11.11.0","@eslint-react/eslint-plugin":"^1.17.1","@ianvs/prettier-plugin-sort-imports":"^4.4.0","@inquirer/prompts":"^7.1.0","@madccc/duplicate-package-checker-webpack-plugin":"^1.0.0","@microflash/rehype-figure":"^2.1.1","@npmcli/run-script":"^9.0.1","@octokit/rest":"^22.0.0","@prettier/sync":"^0.5.4","@qixian.cs/github-contributors-list":"^2.0.2","@size-limit/file":"^11.1.6","@stackblitz/sdk":"^1.11.0","@testing-library/dom":"^10.4.0","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.0.1","@testing-library/user-event":"^14.5.2","@types/adm-zip":"^0.5.6","@types/ali-oss":"^6.16.11","@types/cli-progress":"^3.11.6","@types/css-tree":"^2.3.10","@types/fs-extra":"^11.0.4","@types/gtag.js":"^0.0.20","@types/http-server":"^0.12.4","@types/isomorphic-fetch":"^0.0.39","@types/jest":"^29.5.13","@types/jest-axe":"^3.5.9","@types/jest-environment-puppeteer":"^5.0.6","@types/jest-image-snapshot":"^6.4.0","@types/jquery":"^3.5.31","@types/jsdom":"^21.1.7","@types/lodash":"^4.17.12","@types/minimist":"^1.2.5","@types/node":"^22.10.1","@types/nprogress":"^0.2.3","@types/pixelmatch":"^5.2.6","@types/pngjs":"^6.0.5","@types/prismjs":"^1.26.4","@types/progress":"^2.0.7","@types/react":"^19.0.1","@types/react-copy-to-clipboard":"^5.0.7","@types/react-dom":"^19.0.2","@types/react-highlight-words":"^0.20.0","@types/react-resizable":"^3.0.8","@types/semver":"^7.5.8","@types/spinnies":"^0.5.3","@types/tar":"^6.1.13","@types/throttle-debounce":"^5.0.2","@types/warning":"^3.0.3","adm-zip":"^0.5.16","ali-oss":"^6.21.0","antd-img-crop":"^4.23.0","antd-style":"^3.7.1","antd-token-previewer":"^2.0.8",axios:"^1.7.7",chalk:"^5.0.0",cheerio:"^1.0.0","circular-dependency-plugin":"^5.2.2","cli-progress":"^3.12.0","cross-env":"^7.0.3","cross-fetch":"^4.0.0","css-tree":"^3.1.0","csstree-validator":"^4.0.1","cypress-image-diff-html-report":"2.2.0",dekko:"^0.2.1",dotenv:"^16.4.5",dumi:"~2.4.20","dumi-plugin-color-chunk":"^2.1.0","env-paths":"^3.0.0",eslint:"^9.23.0","eslint-plugin-compat":"^6.0.1","eslint-plugin-jest":"^28.9.0","eslint-plugin-jsx-a11y":"^6.10.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.14","fast-glob":"^3.3.2","fs-extra":"^11.2.0","gh-pages":"^6.2.0","github-slugger":"^2.0.0",glob:"^11.0.0","hast-util-to-string":"^3.0.1",html2sketch:"^1.0.2","http-server":"^14.1.1",husky:"^9.1.6","identity-obj-proxy":"^3.0.0",immer:"^10.1.1","is-ci":"^4.0.0","isomorphic-fetch":"^3.0.0",jest:"^29.7.0","jest-axe":"^10.0.0","jest-canvas-mock":"^2.5.2","jest-environment-jsdom":"^29.7.0","jest-environment-node":"^29.7.0","jest-image-snapshot":"^6.4.0","jest-puppeteer":"^11.0.0",jquery:"^3.7.1",jsdom:"^26.0.0","jsonml-to-react-element":"^1.1.11","jsonml.js":"^0.1.0","lint-staged":"^16.0.0",lodash:"^4.17.21","lunar-typescript":"^1.7.5","lz-string":"^1.5.0",minimist:"^1.2.8",mockdate:"^3.0.5","node-fetch":"^3.3.2","node-notifier":"^10.0.1",open:"^10.1.0",ora:"^8.1.0","p-all":"^5.0.0","package-manager-detector":"^1.0.0",pixelmatch:"^7.1.0",pngjs:"^7.0.0",prettier:"^3.4.1","pretty-format":"^29.7.0",prismjs:"^1.29.0",puppeteer:"^24.7.1","rc-footer":"^0.6.8","rc-tween-one":"^3.0.6","rc-virtual-list":"^3.17.0",react:"^19.1.0","react-copy-to-clipboard":"^5.1.0","react-countup":"^6.5.3","react-dom":"^19.1.0","react-draggable":"^4.4.6","react-fast-marquee":"^1.6.5","react-highlight-words":"^0.21.0","react-icons":"^5.4.0","react-infinite-scroll-component":"^6.1.0","react-intersection-observer":"^9.13.1","react-resizable":"^3.0.5","react-router-dom":"^7.0.1","react-scan":"^0.3.0","react-sticky-box":"^2.0.5","regenerator-runtime":"^0.14.1","rehype-stringify":"^10.0.1",remark:"^15.0.1","remark-cli":"^12.0.1","remark-gfm":"^4.0.0","remark-lint":"^10.0.0","remark-lint-no-undefined-references":"^5.0.0","remark-preset-lint-recommended":"^7.0.0","remark-rehype":"^11.1.1",rimraf:"^6.0.1",runes2:"^1.1.4",semver:"^7.6.3",sharp:"^0.34.0","simple-git":"^3.27.0","size-limit":"^11.1.6",spinnies:"^0.5.1",tar:"^7.4.3","tar-fs":"^3.0.6",terser:"^5.36.0",tsx:"^4.19.2",typedoc:"^0.28.0",typescript:"~5.8.2","vanilla-jsoneditor":"^3.0.0","vanilla-tilt":"^1.8.1",webpack:"^5.97.1","webpack-bundle-analyzer":"^4.10.2","xhr-mock":"^2.5.1","@ant-design/colors":"^7.2.1","@ant-design/cssinjs":"^1.23.0","@ant-design/cssinjs-utils":"^1.1.3","@ant-design/fast-color":"^2.0.6","@ant-design/icons":"^5.6.1","@ant-design/react-slick":"~1.1.2","@babel/runtime":"^7.26.0","@rc-component/color-picker":"~2.0.1","@rc-component/mutate-observer":"^1.1.0","@rc-component/qrcode":"~1.0.0","@rc-component/tour":"~1.15.1","@rc-component/trigger":"^2.2.6",classnames:"^2.5.1","copy-to-clipboard":"^3.3.3",dayjs:"^1.11.11","rc-cascader":"~3.34.0","rc-checkbox":"~3.5.0","rc-collapse":"~3.9.0","rc-dialog":"~9.6.0","rc-drawer":"~7.3.0","rc-dropdown":"~4.2.1","rc-field-form":"~2.7.0","rc-image":"~7.12.0","rc-input":"~1.8.0","rc-input-number":"~9.5.0","rc-mentions":"~2.20.0","rc-menu":"~9.16.1","rc-motion":"^2.9.5","rc-notification":"~5.6.4","rc-pagination":"~5.1.0","rc-picker":"~4.11.3","rc-progress":"~4.0.0","rc-rate":"~2.13.1","rc-resize-observer":"^1.4.3","rc-segmented":"~2.7.0","rc-select":"~14.16.8","rc-slider":"~11.1.8","rc-steps":"~6.0.1","rc-switch":"~4.1.0","rc-table":"~7.50.5","rc-tabs":"~15.6.1","rc-textarea":"~1.10.0","rc-tooltip":"~6.4.0","rc-tree":"~5.13.1","rc-tree-select":"~5.27.0","rc-upload":"~4.9.2","rc-util":"^5.44.4","scroll-into-view-if-needed":"^3.1.0","throttle-debounce":"^5.0.2"},jsx:"/* eslint-disable react-dom/no-dangerously-set-innerhtml */\nimport React from 'react';\nimport { Flex } from 'antd';\nconst styleTxt = `\n.blog-css-tricks {\n  border: 1px solid #0958d9;\n  width: 200px;\n  height: 50px;\n}\n\n.blog-css-tricks {\n  @container style(--custom-var) {\n    p {\n      color: green;\n    }\n  }\n}\n`;\nconst Block = props => (\n  <div className=\"blog-css-tricks\" style={props.style}>\n    <p>{props.children}</p>\n  </div>\n);\nexport default () => (\n  <Flex vertical gap=\"middle\">\n    <style>{styleTxt}</style>\n    <Block>Without CSS Var</Block>\n    <Block style={{ '--custom-var': '0px' }}>With CSS Var</Block>\n  </Flex>\n);\n"}}),(0,r.jsxs)("div",{className:"markdown",children:[(0,r.jsxs)("p",{children:[d.texts[28].value,(0,r.jsx)("code",{children:d.texts[29].value}),d.texts[30].value,(0,r.jsx)("code",{children:d.texts[31].value}),d.texts[32].value]}),(0,r.jsxs)("h2",{id:"scope",children:[(0,r.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#scope",sourceType:"a",children:(0,r.jsx)("span",{className:"icon icon-link"})}),"@scope"]}),(0,r.jsxs)("p",{children:[d.texts[33].value,(0,r.jsx)("code",{children:d.texts[34].value}),d.texts[35].value,(0,r.jsx)("code",{children:d.texts[36].value}),d.texts[37].value]}),(0,r.jsx)(a.default,{lang:"css",children:d.texts[38].value}),(0,r.jsxs)("p",{children:[d.texts[39].value,(0,r.jsx)("code",{children:d.texts[40].value}),d.texts[41].value,(0,r.jsx)("code",{children:d.texts[42].value}),d.texts[43].value,(0,r.jsx)("code",{children:d.texts[44].value}),d.texts[45].value]}),(0,r.jsx)(a.default,{lang:"css",children:d.texts[46].value}),(0,r.jsx)(a.default,{lang:"tsx",children:d.texts[47].value}),(0,r.jsxs)("p",{children:[d.texts[48].value,(0,r.jsx)("code",{children:d.texts[49].value}),d.texts[50].value]}),(0,r.jsx)(a.default,{lang:"css",children:d.texts[51].value})]}),(0,r.jsx)(c.DumiDemo,{demo:{id:"docs-blog-css-tricks-demo-scope"},previewerProps:{title:"\u5F71\u54CD\u8303\u56F4",filename:"docs/blog/css-tricks/scope.tsx",pkgDependencyList:{"@ant-design/compatible":"^5.1.3","@ant-design/happy-work-theme":"^1.0.0","@ant-design/tools":"^18.0.3","@ant-design/v5-patch-for-react-19":"^1.0.2","@antfu/eslint-config":"^4.0.0","@antv/g6":"^4.8.24","@biomejs/biome":"^1.9.4","@codecov/webpack-plugin":"^1.4.0","@codesandbox/sandpack-react":"^2.19.10","@dnd-kit/core":"^6.2.0","@dnd-kit/modifiers":"^9.0.0","@dnd-kit/sortable":"^10.0.0","@dnd-kit/utilities":"^3.2.2","@emotion/css":"^11.13.5","@emotion/react":"^11.13.5","@emotion/server":"^11.11.0","@eslint-react/eslint-plugin":"^1.17.1","@ianvs/prettier-plugin-sort-imports":"^4.4.0","@inquirer/prompts":"^7.1.0","@madccc/duplicate-package-checker-webpack-plugin":"^1.0.0","@microflash/rehype-figure":"^2.1.1","@npmcli/run-script":"^9.0.1","@octokit/rest":"^22.0.0","@prettier/sync":"^0.5.4","@qixian.cs/github-contributors-list":"^2.0.2","@size-limit/file":"^11.1.6","@stackblitz/sdk":"^1.11.0","@testing-library/dom":"^10.4.0","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.0.1","@testing-library/user-event":"^14.5.2","@types/adm-zip":"^0.5.6","@types/ali-oss":"^6.16.11","@types/cli-progress":"^3.11.6","@types/css-tree":"^2.3.10","@types/fs-extra":"^11.0.4","@types/gtag.js":"^0.0.20","@types/http-server":"^0.12.4","@types/isomorphic-fetch":"^0.0.39","@types/jest":"^29.5.13","@types/jest-axe":"^3.5.9","@types/jest-environment-puppeteer":"^5.0.6","@types/jest-image-snapshot":"^6.4.0","@types/jquery":"^3.5.31","@types/jsdom":"^21.1.7","@types/lodash":"^4.17.12","@types/minimist":"^1.2.5","@types/node":"^22.10.1","@types/nprogress":"^0.2.3","@types/pixelmatch":"^5.2.6","@types/pngjs":"^6.0.5","@types/prismjs":"^1.26.4","@types/progress":"^2.0.7","@types/react":"^19.0.1","@types/react-copy-to-clipboard":"^5.0.7","@types/react-dom":"^19.0.2","@types/react-highlight-words":"^0.20.0","@types/react-resizable":"^3.0.8","@types/semver":"^7.5.8","@types/spinnies":"^0.5.3","@types/tar":"^6.1.13","@types/throttle-debounce":"^5.0.2","@types/warning":"^3.0.3","adm-zip":"^0.5.16","ali-oss":"^6.21.0","antd-img-crop":"^4.23.0","antd-style":"^3.7.1","antd-token-previewer":"^2.0.8",axios:"^1.7.7",chalk:"^5.0.0",cheerio:"^1.0.0","circular-dependency-plugin":"^5.2.2","cli-progress":"^3.12.0","cross-env":"^7.0.3","cross-fetch":"^4.0.0","css-tree":"^3.1.0","csstree-validator":"^4.0.1","cypress-image-diff-html-report":"2.2.0",dekko:"^0.2.1",dotenv:"^16.4.5",dumi:"~2.4.20","dumi-plugin-color-chunk":"^2.1.0","env-paths":"^3.0.0",eslint:"^9.23.0","eslint-plugin-compat":"^6.0.1","eslint-plugin-jest":"^28.9.0","eslint-plugin-jsx-a11y":"^6.10.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.14","fast-glob":"^3.3.2","fs-extra":"^11.2.0","gh-pages":"^6.2.0","github-slugger":"^2.0.0",glob:"^11.0.0","hast-util-to-string":"^3.0.1",html2sketch:"^1.0.2","http-server":"^14.1.1",husky:"^9.1.6","identity-obj-proxy":"^3.0.0",immer:"^10.1.1","is-ci":"^4.0.0","isomorphic-fetch":"^3.0.0",jest:"^29.7.0","jest-axe":"^10.0.0","jest-canvas-mock":"^2.5.2","jest-environment-jsdom":"^29.7.0","jest-environment-node":"^29.7.0","jest-image-snapshot":"^6.4.0","jest-puppeteer":"^11.0.0",jquery:"^3.7.1",jsdom:"^26.0.0","jsonml-to-react-element":"^1.1.11","jsonml.js":"^0.1.0","lint-staged":"^16.0.0",lodash:"^4.17.21","lunar-typescript":"^1.7.5","lz-string":"^1.5.0",minimist:"^1.2.8",mockdate:"^3.0.5","node-fetch":"^3.3.2","node-notifier":"^10.0.1",open:"^10.1.0",ora:"^8.1.0","p-all":"^5.0.0","package-manager-detector":"^1.0.0",pixelmatch:"^7.1.0",pngjs:"^7.0.0",prettier:"^3.4.1","pretty-format":"^29.7.0",prismjs:"^1.29.0",puppeteer:"^24.7.1","rc-footer":"^0.6.8","rc-tween-one":"^3.0.6","rc-virtual-list":"^3.17.0",react:"^19.1.0","react-copy-to-clipboard":"^5.1.0","react-countup":"^6.5.3","react-dom":"^19.1.0","react-draggable":"^4.4.6","react-fast-marquee":"^1.6.5","react-highlight-words":"^0.21.0","react-icons":"^5.4.0","react-infinite-scroll-component":"^6.1.0","react-intersection-observer":"^9.13.1","react-resizable":"^3.0.5","react-router-dom":"^7.0.1","react-scan":"^0.3.0","react-sticky-box":"^2.0.5","regenerator-runtime":"^0.14.1","rehype-stringify":"^10.0.1",remark:"^15.0.1","remark-cli":"^12.0.1","remark-gfm":"^4.0.0","remark-lint":"^10.0.0","remark-lint-no-undefined-references":"^5.0.0","remark-preset-lint-recommended":"^7.0.0","remark-rehype":"^11.1.1",rimraf:"^6.0.1",runes2:"^1.1.4",semver:"^7.6.3",sharp:"^0.34.0","simple-git":"^3.27.0","size-limit":"^11.1.6",spinnies:"^0.5.1",tar:"^7.4.3","tar-fs":"^3.0.6",terser:"^5.36.0",tsx:"^4.19.2",typedoc:"^0.28.0",typescript:"~5.8.2","vanilla-jsoneditor":"^3.0.0","vanilla-tilt":"^1.8.1",webpack:"^5.97.1","webpack-bundle-analyzer":"^4.10.2","xhr-mock":"^2.5.1","@ant-design/colors":"^7.2.1","@ant-design/cssinjs":"^1.23.0","@ant-design/cssinjs-utils":"^1.1.3","@ant-design/fast-color":"^2.0.6","@ant-design/icons":"^5.6.1","@ant-design/react-slick":"~1.1.2","@babel/runtime":"^7.26.0","@rc-component/color-picker":"~2.0.1","@rc-component/mutate-observer":"^1.1.0","@rc-component/qrcode":"~1.0.0","@rc-component/tour":"~1.15.1","@rc-component/trigger":"^2.2.6",classnames:"^2.5.1","copy-to-clipboard":"^3.3.3",dayjs:"^1.11.11","rc-cascader":"~3.34.0","rc-checkbox":"~3.5.0","rc-collapse":"~3.9.0","rc-dialog":"~9.6.0","rc-drawer":"~7.3.0","rc-dropdown":"~4.2.1","rc-field-form":"~2.7.0","rc-image":"~7.12.0","rc-input":"~1.8.0","rc-input-number":"~9.5.0","rc-mentions":"~2.20.0","rc-menu":"~9.16.1","rc-motion":"^2.9.5","rc-notification":"~5.6.4","rc-pagination":"~5.1.0","rc-picker":"~4.11.3","rc-progress":"~4.0.0","rc-rate":"~2.13.1","rc-resize-observer":"^1.4.3","rc-segmented":"~2.7.0","rc-select":"~14.16.8","rc-slider":"~11.1.8","rc-steps":"~6.0.1","rc-switch":"~4.1.0","rc-table":"~7.50.5","rc-tabs":"~15.6.1","rc-textarea":"~1.10.0","rc-tooltip":"~6.4.0","rc-tree":"~5.13.1","rc-tree-select":"~5.27.0","rc-upload":"~4.9.2","rc-util":"^5.44.4","scroll-into-view-if-needed":"^3.1.0","throttle-debounce":"^5.0.2"},jsx:'/* eslint-disable react-dom/no-dangerously-set-innerhtml */\nimport React from \'react\';\nimport { Flex } from \'antd\';\nconst styleTxt = `\n  @scope (.blog-css-tricks-a) to (span) {\n    color: red;\n  }\n\n  .blog-css-tricks-b {\n    color: blue;\n  }\n`;\nexport default () => (\n  <Flex vertical gap="middle">\n    <style>{styleTxt}</style>\n    <div className="blog-css-tricks-a">\n      <span>Should be red</span>\n    </div>\n    <div className="blog-css-tricks-a">\n      <span>\n        <div className="blog-css-tricks-b">\n          <span>Should be blue</span>\n        </div>\n      </span>\n    </div>\n  </Flex>\n);\n'}}),(0,r.jsx)("div",{className:"markdown",children:(0,r.jsxs)("p",{children:[d.texts[52].value,(0,r.jsx)("code",{children:d.texts[53].value}),d.texts[54].value]})})]})})});};}}]);