https://codefictionist.vercel.app/assets/js/8f535912.e0ebc036.js

1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[6626],{12372:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>a,frontMatter:()=>c,metadata:()=>s,toc:()=>o});const s=JSON.parse('{"id":"day_series/02-2024_ithome/day_02","title":"Day 02 - CSS \u8b8a\u5f62\u57fa\u790e","description":"\u8aaa\u5230 CSS \u7684\u8b8a\u5f62\uff0c\u5927\u5bb6\u90fd\u6703\u806f\u60f3\u5230 transform \u9019\u500b\u5c6c\u6027\uff0c\u9019\u500b\u5c6c\u6027\u53ef\u4ee5\u8b93\u6211\u5011\u5c0d\u5143\u7d20\u9032\u884c\u65cb\u8f49\u3001\u7e2e\u653e\u3001\u79fb\u52d5\u548c\u50be\u659c\u7b49\u6548\u679c\u3002","source":"@site/docs/30_day_series/02-2024_ithome/03-day_02.mdx","sourceDirName":"30_day_series/02-2024_ithome","slug":"/day_series/02-2024_ithome/day_02","permalink":"/docs/day_series/02-2024_ithome/day_02","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"title":"Day 02 - CSS \u8b8a\u5f62\u57fa\u790e"},"sidebar":"thirtySeriesSidebar","previous":{"title":"Day 01 - CSS \u52d5\u756b\u57fa\u790e","permalink":"/docs/day_series/02-2024_ithome/day_01"},"next":{"title":"Day 03 - \u8907\u5408\u52d5\u756b","permalink":"/docs/day_series/02-2024_ithome/day_03"}}');var d=r(74848),t=r(28453);const c={title:"Day 02 - CSS \u8b8a\u5f62\u57fa\u790e"},i=void 0,l={},o=[{value:"<code>transform</code> \u7684\u5927\u5bb6\u65cf",id:"transform-\u7684\u5927\u5bb6\u65cf",level:2},{value:"<code>transition</code> \u53c8\u662f\u4ec0\u9ebc\uff1f",id:"transition-\u53c8\u662f\u4ec0\u9ebc",level:2},{value:"Reference",id:"reference",level:2}];function h(e){const n={a:"a",blockquote:"blockquote",br:"br",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(n.p,{children:["\u8aaa\u5230 CSS \u7684\u8b8a\u5f62\uff0c\u5927\u5bb6\u90fd\u6703\u806f\u60f3\u5230 ",(0,d.jsx)(n.code,{children:"transform"})," \u9019\u500b\u5c6c\u6027\uff0c\u9019\u500b\u5c6c\u6027\u53ef\u4ee5\u8b93\u6211\u5011\u5c0d\u5143\u7d20\u9032\u884c\u65cb\u8f49\u3001\u7e2e\u653e\u3001\u79fb\u52d5\u548c\u50be\u659c\u7b49\u6548\u679c\u3002",(0,d.jsx)(n.br,{}),"\n","\u57fa\u672c\u4e0a\uff0c\u5c0d\u65bc\u90e8\u5206\u524d\u7aef\u5de5\u7a0b\u5e2b\u4f86\u8aaa\uff0c",(0,d.jsx)(n.code,{children:"transform"})," \u9019\u500b\u5c6c\u6027\u4e5f\u4e0d\u662f\u5f88\u964c\u751f\uff0c\u6709\u4e00\u9053\u7d93\u5178\u7684\u9762\u8a66\u8003\u984c\u662f\u9019\u6a23\u7684\uff1a"]}),"\n",(0,d.jsxs)(n.blockquote,{children:["\n",(0,d.jsx)(n.p,{children:"\u8acb\u554f\u5982\u4f55\u5c07\u539f\u7d20\u505a\u7f6e\u4e2d\u6548\u679c\uff1f"}),"\n"]}),"\n",(0,d.jsxs)(n.p,{children:["\u9019\u984c\u7b54\u6848\u6709\u597d\u5e7e\u500b\uff0c\u6211\u5011\u4e0d\u8a0e\u8ad6 ",(0,d.jsx)(n.code,{children:"flex"})," \u6216 ",(0,d.jsx)(n.code,{children:"grid"})," \u7684\u65b9\u5f0f\uff0c\u6211\u5011\u4f86\u8ac7\u8ac7 ",(0,d.jsx)(n.code,{children:"transform"}),"\uff1a"]}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-html",children:'<div class="parent position">\n <div></div>\n</div>\n'})}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-css",children:".parent {\n border: black solid 3px;\n width: 20vw;\n aspect-ratio: 1;\n position: relative;\n\n div {\n  border: red solid 2px;\n  width: 5vw;\n  aspect-ratio: 1;\n  background-color: red;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n }\n}\n"})}),"\n",(0,d.jsx)("iframe",{width:"100%",height:"600",title:"Untitled",src:"https://codepen.io/ChungYingHo/embed/OJeOprx?default-tab=html%2Cresult",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,d.jsxs)(n.p,{children:["See the Pen ",(0,d.jsx)("a",{href:"https://codepen.io/ChungYingHo/pen/OJeOprx",children:"\nUntitled"})," by ChungYingHo (",(0,d.jsx)("a",{href:"https://codepen.io/ChungYingHo",children:"@ChungYingHo"}),")\non ",(0,d.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})}),"\n",(0,d.jsxs)(n.p,{children:["\u5728\u4e0a\u8ff0\u7684\u4f8b\u5b50\u4e2d\uff0c\u5982\u679c\u50c5\u900f\u904e ",(0,d.jsx)(n.code,{children:"position: absolute;"})," \u4f86\u505a\u7f6e\u4e2d\uff0c\u6211\u5011\u6703\u767c\u73fe\u662f\u5143\u7d20\u7684",(0,d.jsx)(n.strong,{children:"\u5de6\u4e0a\u89d2"}),"\u6703\u88ab\u7f6e\u4e2d\uff0c\u800c\u4e0d\u662f\u5143\u7d20\u7684",(0,d.jsx)(n.strong,{children:"\u4e2d\u5fc3\u9ede"}),"\u88ab\u7f6e\u4e2d\u3002",(0,d.jsx)(n.br,{}),"\n","\u9019\u6642\u5f8c\u900f\u904e ",(0,d.jsx)(n.code,{children:"transform: translate(-50%, -50%);"}),"\uff0c\u4f7f\u5143\u7d20\u5411\u5de6\u53ca\u5411\u53f3\u5404\u79fb\u52d5\u81ea\u8eab\u5bec\u5ea6\u7684\u4e00\u534a\uff0c\u5c31\u53ef\u4ee5\u9054\u5230\u5143\u7d20\u7684\u4e2d\u5fc3\u9ede\u88ab\u7f6e\u4e2d\u7684\u6548\u679c\u3002",(0,d.jsx)(n.br,{}),"\n","\u9019\u5c31\u662f ",(0,d.jsx)(n.code,{children:"transform"})," \u7684\u4e00\u500b\u5e38\u898b\u61c9\u7528\u3002"]}),"\n",(0,d.jsxs)(n.h2,{id:"transform-\u7684\u5927\u5bb6\u65cf",children:[(0,d.jsx)(n.code,{children:"transform"})," \u7684\u5927\u5bb6\u65cf"]}),"\n",(0,d.jsxs)(n.p,{children:[(0,d.jsx)(n.code,{children:"transform"})," \u7576\u7136\u4e0d\u53ea\u6709 ",(0,d.jsx)(n.code,{children:"translate"})," \u4e00\u500b\u65b9\u6cd5\uff0c\u9084\u6709\u975e\u5e38\u591a\u7684\u65b9\u6cd5\u53ef\u4ee5\u8b93\u6211\u5011\u5c0d\u5143\u7d20\u9032\u884c\u8b8a\u5f62\uff0c\u6211\u505a\u4e86\u4e00\u500b\u7c21\u8868\uff1a"]}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.th,{children:"\u65b9\u6cd5"}),(0,d.jsx)(n.th,{children:"\u7c21\u4ecb"}),(0,d.jsx)(n.th,{children:"\u7c21\u55ae\u7bc4\u4f8b\u4ee3\u78bc"})]})}),(0,d.jsxs)(n.tbody,{children:[(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"translate"})}),(0,d.jsx)(n.td,{children:"\u5c07\u5143\u7d20\u5728\u6c34\u5e73\u548c\u5782\u76f4\u65b9\u5411\u4e0a\u79fb\u52d5\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: translate(50px, 60px);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"translateX"})}),(0,d.jsx)(n.td,{children:"\u53ea\u5728\u6c34\u5e73\u65b9\u5411 (X \u8ef8) \u4e0a\u79fb\u52d5\u5143\u7d20\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: translateX(50px);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"translateY"})}),(0,d.jsx)(n.td,{children:"\u53ea\u5728\u5782\u76f4\u65b9\u5411 (Y \u8ef8) \u4e0a\u79fb\u52d5\u5143\u7d20\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: translateY(60px);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"scale"})}),(0,d.jsx)(n.td,{children:"\u6839\u64da\u63d0\u4f9b\u7684\u6bd4\u4f8b\u7e2e\u653e\u5143\u7d20\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: scale(1.5, 0.75);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"scaleX"})}),(0,d.jsx)(n.td,{children:"\u53ea\u5728\u6c34\u5e73\u65b9\u5411\u7e2e\u653e\u5143\u7d20\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: scaleX(1.5);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"scaleY"})}),(0,d.jsx)(n.td,{children:"\u53ea\u5728\u5782\u76f4\u65b9\u5411\u7e2e\u653e\u5143\u7d20\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: scaleY(0.75);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"rotate"})}),(0,d.jsx)(n.td,{children:"\u4ee5\u6307\u5b9a\u89d2\u5ea6\u65cb\u8f49\u5143\u7d20\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: rotate(15deg);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"skew"})}),(0,d.jsx)(n.td,{children:"\u6839\u64da\u63d0\u4f9b\u7684\u89d2\u5ea6\u50be\u659c\u5143\u7d20\uff0c\u5f62\u6210\u4e00\u500b\u5e73\u884c\u56db\u908a\u5f62\u7684\u6548\u679c\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: skew(15deg, 30deg);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"skewX"})}),(0,d.jsx)(n.td,{children:"\u53ea\u5728\u6c34\u5e73\u65b9\u5411\u50be\u659c\u5143\u7d20\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: skewX(15deg);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"skewY"})}),(0,d.jsx)(n.td,{children:"\u53ea\u5728\u5782\u76f4\u65b9\u5411\u50be\u659c\u5143\u7d20\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: skewY(30deg);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"matrix"})}),(0,d.jsxs)(n.td,{children:["\u7b49\u540c ",(0,d.jsx)(n.code,{children:"matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)"}),"\uff0c\u4f46\u9808\u8981\u628a\u89d2\u5ea6\u8f49\u6210\u5f27\u5ea6"]}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: matrix(1.5, 0.5, 0.3, 0.75, 50px, 60

1px);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"perspective"})}),(0,d.jsx)(n.td,{children:"\u4ee5\u4e09\u7dad\u8996\u89d2\u900f\u8996\u7684\u65b9\u5f0f\u770b\u5143\u7d20\uff0c\u4f7f\u5176\u6709\u9060\u8fd1\u7684\u6df1\u5ea6\u611f\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: perspective(100px) rotateX(30deg);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"rotateX"})}),(0,d.jsx)(n.td,{children:"\u7e5e X \u8ef8\u65cb\u8f49\u5143\u7d20 (3D \u65cb\u8f49)\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: rotateX(60deg);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"rotateY"})}),(0,d.jsx)(n.td,{children:"\u7e5e Y \u8ef8\u65cb\u8f49\u5143\u7d20 (3D \u65cb\u8f49)\u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: rotateY(60deg);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"rotateZ"})}),(0,d.jsxs)(n.td,{children:["\u7e5e Z \u8ef8\u65cb\u8f49\u5143\u7d20 (\u8207 ",(0,d.jsx)(n.code,{children:"rotate"})," \u4e00\u6a23\uff0c3D \u65cb\u8f49)\u3002"]}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: rotateZ(15deg);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"translateZ"})}),(0,d.jsxs)(n.td,{children:["\u5728 Z \u8ef8\u4e0a\u79fb\u52d5\u5143\u7d20 (3D \u8f49\u63db)\uff0c\u642d\u914d ",(0,d.jsx)(n.code,{children:"rotateX"})," \u8ddf ",(0,d.jsx)(n.code,{children:"rotateY"})," \u8f03\u770b\u5f97\u51fa\u6548\u679c\u3002"]}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: translateZ(100px);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"scaleZ"})}),(0,d.jsx)(n.td,{children:"\u53ea\u5728 Z \u8ef8\u7e2e\u653e\u5143\u7d20 (3D \u8f49\u63db) \u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: scaleZ(2);"})})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"skewZ"})}),(0,d.jsx)(n.td,{children:"\u7e5e Z \u8ef8\u50be\u659c\u5143\u7d20 (3D \u8f49\u63db) \u3002"}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"transform: skewZ(10deg);"})})]})]})]}),"\n",(0,d.jsx)("iframe",{width:"100%",height:"600",title:"day 2 - transform_method",src:"https://codepen.io/ChungYingHo/embed/gONXWvj?default-tab=html%2Cresult",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,d.jsxs)(n.p,{children:["See the Pen ",(0,d.jsx)("a",{href:"https://codepen.io/ChungYingHo/pen/gONXWvj",children:"\nday 2 - transform_method"})," by ChungYingHo (",(0,d.jsx)("a",{href:"https://codepen.io/ChungYingHo",children:"@ChungYingHo"}),")\non ",(0,d.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})}),"\n",(0,d.jsxs)(n.h2,{id:"transition-\u53c8\u662f\u4ec0\u9ebc",children:[(0,d.jsx)(n.code,{children:"transition"})," \u53c8\u662f\u4ec0\u9ebc\uff1f"]}),"\n",(0,d.jsxs)(n.p,{children:["\u5982\u679c\u4f60\u5920\u7d30\u5fc3\uff0c\u4f60\u6703\u767c\u73fe ",(0,d.jsx)(n.code,{children:"transform"})," \u7684\u8b8a\u5f62\u662f\u5728\u77ac\u9593\u5b8c\u6210\u7684\uff0c\u9019\u6a23\u7684\u6548\u679c\u6709\u6642\u5019\u6703\u8b93\u4eba\u611f\u5230\u7a81\u5140\uff0c\u9019\u6642\u5019\u5c31\u53ef\u4ee5\u4f7f\u7528 ",(0,d.jsx)(n.code,{children:"transition"})," \u4f86\u8b93\u8b8a\u5f62\u7684\u904e\u7a0b\u8b8a\u5f97\u5e73\u6ed1\u3002",(0,d.jsx)(n.br,{}),"\n","\u57fa\u672c\u7684 ",(0,d.jsx)(n.code,{children:"transition"})," \u5beb\u6cd5\u5982\u4e0b\uff1a"]}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-css",children:".element {\n transition: property duration timing-function delay;\n}\n"})}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.code,{children:"property"}),"\uff1a\u6307\u5b9a\u8981\u8b8a\u5316\u7684 CSS \u5c6c\u6027\uff0c\u4f8b\u5982 ",(0,d.jsx)(n.code,{children:"transform"}),"\u3002"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.code,{children:"duration"}),"\uff1a\u6307\u5b9a\u8b8a\u5316\u7684\u6642\u9593\uff0c\u4f8b\u5982 ",(0,d.jsx)(n.code,{children:"1s"}),"\u3002"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.code,{children:"timing-function"}),"\uff1a\u6307\u5b9a\u8b8a\u5316\u7684\u901f\u5ea6\u66f2\u7dda\uff0c\u4f8b\u5982 ",(0,d.jsx)(n.code,{children:"ease-in-out"}),"\u3002"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.code,{children:"delay"}),"\uff1a\u6307\u5b9a\u8b8a\u5316\u7684\u5ef6\u9072\u6642\u9593\uff0c\u4f8b\u5982 ",(0,d.jsx)(n.code,{children:"2s"}),"\u3002"]}),"\n"]}),"\n",(0,d.jsx)(n.p,{children:"\u73fe\u5728\u4f86\u770b\u500b\u5be6\u969b\u4f8b\u5b50\uff0c\u5728\u9

1019\u500b\u4f8b\u5b50\u4e2d\uff0c\u7576\u6ed1\u9f20\u61f8\u505c\u5728\u5143\u7d20\u4e0a\u6642\uff0c\u5143\u7d20\u7684\u5bec\u5ea6\u6703\u5f9e 100px \u8b8a\u6210 200px\uff0c\u4e26\u4e14\u6703\u5728 1 \u79d2\u5167\u5b8c\u6210\uff0c\u4e14\u6703\u6709 2 \u79d2\u7684\u5ef6\u9072\u6642\u9593\uff1a"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-css",children:".element {\n width: 100px;\n height: 100px;\n background-color: red;\n transition: width 1s ease-in-out 2s;\n}\n\n.element:hover {\n width: 200px;\n}\n"})}),"\n",(0,d.jsx)("iframe",{width:"100%",height:"600",title:"day 2 - transition",src:"https://codepen.io/ChungYingHo/embed/poXdPxo?default-tab=html%2Cresult",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,d.jsxs)(n.p,{children:["See the Pen ",(0,d.jsx)("a",{href:"https://codepen.io/ChungYingHo/pen/poXdPxo",children:"\nday 2 - transition"})," by ChungYingHo (",(0,d.jsx)("a",{href:"https://codepen.io/ChungYingHo",children:"@ChungYingHo"}),")\non ",(0,d.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})}),"\n",(0,d.jsx)(n.h2,{id:"reference",children:"Reference"}),"\n",(0,d.jsxs)(n.ol,{children:["\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.a,{href:"https://www.w3schools.com/css/css3_2dtransforms.asp",children:"W3 schools - 2D Transform"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.a,{href:"https://www.w3schools.com/css/css3_3dtransforms.asp",children:"W3 schools - 3D Transform"})}),"\n",(0,d.jsx)(n.li,{children:(0,d.jsx)(n.a,{href:"https://www.w3schools.com/css/css3_transitions.asp",children:"W3 schools - Transitions"})}),"\n"]})]})}function a(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(h,{...e})}):h(e)}},28453:(e,n,r)=>{r.d(n,{R:()=>c,x:()=>i});var s=r(96540);const d={},t=s.createContext(d);function c(e){const n=s.useContext(t);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:c(e.components),s.createElement(t.Provider,{value:n},e.children)}}}]);