[docs] Add theme.applyStyles and migrate docs (#42498)

mui · Jun 11, 2024 · 219380c · 219380c
1 parent d569d3f
commit 219380c
Show file tree

Hide file tree

Showing 378 changed files with 5,345 additions and 3,184 deletions.
diff --git a/docs/data/joy/components/accordion/AccordionDepthPanel.js b/docs/data/joy/components/accordion/AccordionDepthPanel.js
@@ -13,19 +13,19 @@ export default function AccordionDepthPanel() {
     <AccordionGroup
       variant="outlined"
       transition="0.2s"
-      sx={{
+      sx={(theme) => ({
         maxWidth: 400,
         borderRadius: 'lg',
         [`& .${accordionSummaryClasses.button}:hover`]: {
           bgcolor: 'transparent',
         },
         [`& .${accordionDetailsClasses.content}`]: {
-          boxShadow: (theme) => `inset 0 1px ${theme.vars.palette.divider}`,
+          boxShadow: `inset 0 1px ${theme.vars.palette.divider}`,
           [`&.${accordionDetailsClasses.expanded}`]: {
             paddingBlock: '0.75rem',
           },
         },
-      }}
+      })}
     >
       <Accordion defaultExpanded>
         <AccordionSummary>First accordion</AccordionSummary>

diff --git a/docs/data/joy/components/accordion/AccordionDepthPanel.tsx b/docs/data/joy/components/accordion/AccordionDepthPanel.tsx
@@ -13,19 +13,19 @@ export default function AccordionDepthPanel() {
     <AccordionGroup
       variant="outlined"
       transition="0.2s"
-      sx={{
+      sx={(theme) => ({
         maxWidth: 400,
         borderRadius: 'lg',
         [`& .${accordionSummaryClasses.button}:hover`]: {
           bgcolor: 'transparent',
         },
         [`& .${accordionDetailsClasses.content}`]: {
-          boxShadow: (theme) => `inset 0 1px ${theme.vars.palette.divider}`,
+          boxShadow: `inset 0 1px ${theme.vars.palette.divider}`,
           [`&.${accordionDetailsClasses.expanded}`]: {
             paddingBlock: '0.75rem',
           },
         },
-      }}
+      })}
     >
       <Accordion defaultExpanded>
         <AccordionSummary>First accordion</AccordionSummary>

diff --git a/docs/data/joy/components/accordion/AccordionStylingExpansion.js b/docs/data/joy/components/accordion/AccordionStylingExpansion.js
@@ -7,7 +7,7 @@ import AccordionSummary from '@mui/joy/AccordionSummary';
 export default function AccordionStylingExpansion() {
   return (
     <AccordionGroup
-      sx={{
+      sx={(theme) => ({
         maxWidth: 400,
         [`& .${accordionClasses.root}`]: {
           marginTop: '0.5rem',
@@ -27,9 +27,9 @@ export default function AccordionStylingExpansion() {
           borderColor: 'background.level2',
         },
         '& [aria-expanded="true"]': {
-          boxShadow: (theme) => `inset 0 -1px 0 ${theme.vars.palette.divider}`,
+          boxShadow: `inset 0 -1px 0 ${theme.vars.palette.divider}`,
         },
-      }}
+      })}
     >
       <Accordion>
         <AccordionSummary>First accordion</AccordionSummary>

diff --git a/docs/data/joy/components/accordion/AccordionStylingExpansion.tsx b/docs/data/joy/components/accordion/AccordionStylingExpansion.tsx
@@ -7,7 +7,7 @@ import AccordionSummary from '@mui/joy/AccordionSummary';
 export default function AccordionStylingExpansion() {
   return (
     <AccordionGroup
-      sx={{
+      sx={(theme) => ({
         maxWidth: 400,
         [`& .${accordionClasses.root}`]: {
           marginTop: '0.5rem',
@@ -27,9 +27,9 @@ export default function AccordionStylingExpansion() {
           borderColor: 'background.level2',
         },
         '& [aria-expanded="true"]': {
-          boxShadow: (theme) => `inset 0 -1px 0 ${theme.vars.palette.divider}`,
+          boxShadow: `inset 0 -1px 0 ${theme.vars.palette.divider}`,
         },
-      }}
+      })}
     >
       <Accordion>
         <AccordionSummary>First accordion</AccordionSummary>

diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js
@@ -18,10 +18,10 @@ export default function FlexRowRatio() {
         sx={{ gap: 2, minWidth: 300 }}
       >
         <AspectRatio
-          sx={{
-            flexBasis: flexBasis ? `${flexBasis}px` : undefined,
-            overflow: 'auto',
-          }}
+          sx={[
+            { overflow: 'auto' },
+            flexBasis ? { flexBasis: `${flexBasis}px` } : { flexBasis: null },
+          ]}
         >
           <img
             src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"

diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx b/docs/data/joy/components/aspect-ratio/FlexRowRatio.tsx
@@ -18,10 +18,10 @@ export default function FlexRowRatio() {
         sx={{ gap: 2, minWidth: 300 }}
       >
         <AspectRatio
-          sx={{
-            flexBasis: flexBasis ? `${flexBasis}px` : undefined,
-            overflow: 'auto',
-          }}
+          sx={[
+            { overflow: 'auto' },
+            flexBasis ? { flexBasis: `${flexBasis}px` } : { flexBasis: null },
+          ]}
         >
           <img
             src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"

diff --git a/docs/data/joy/components/autocomplete/GitHubLabel.js b/docs/data/joy/components/autocomplete/GitHubLabel.js
@@ -179,7 +179,13 @@ export default function GitHubLabel() {
                     },
                   })}
                 >
-                  <DoneIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} />
+                  <DoneIcon
+                    sx={[
+                      selected
+                        ? { visibility: 'visible' }
+                        : { visibility: 'hidden' },
+                    ]}
+                  />
                   <Box
                     component="span"
                     sx={{
@@ -197,7 +203,17 @@ export default function GitHubLabel() {
                     <Typography level="title-sm">{option.name}</Typography>
                     <Typography level="body-xs">{option.description}</Typography>
                   </Box>
-                  <CloseIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} />
+                  <CloseIcon
+                    sx={[
+                      selected
+                        ? {
+                            visibility: 'visible',
+                          }
+                        : {
+                            visibility: 'hidden',
+                          },
+                    ]}
+                  />
                 </AutocompleteOption>
               )}
               options={[...labels].sort((a, b) => {

diff --git a/docs/data/joy/components/autocomplete/GitHubLabel.tsx b/docs/data/joy/components/autocomplete/GitHubLabel.tsx
@@ -180,7 +180,13 @@ export default function GitHubLabel() {
                     },
                   })}
                 >
-                  <DoneIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} />
+                  <DoneIcon
+                    sx={[
+                      selected
+                        ? { visibility: 'visible' }
+                        : { visibility: 'hidden' },
+                    ]}
+                  />
                   <Box
                     component="span"
                     sx={{
@@ -198,7 +204,17 @@ export default function GitHubLabel() {
                     <Typography level="title-sm">{option.name}</Typography>
                     <Typography level="body-xs">{option.description}</Typography>
                   </Box>
-                  <CloseIcon sx={{ visibility: selected ? 'visible' : 'hidden' }} />
+                  <CloseIcon
+                    sx={[
+                      selected
+                        ? {
+                            visibility: 'visible',
+                          }
+                        : {
+                            visibility: 'hidden',
+                          },
+                    ]}
+                  />
                 </AutocompleteOption>
               )}
               options={[...labels].sort((a, b) => {

diff --git a/docs/data/joy/components/card/InstagramPost.js b/docs/data/joy/components/card/InstagramPost.js
@@ -73,12 +73,16 @@ export default function InstagramPost() {
           {[...Array(5)].map((_, index) => (
             <Box
               key={index}
-              sx={{
-                borderRadius: '50%',
-                width: `max(${6 - index}px, 3px)`,
-                height: `max(${6 - index}px, 3px)`,
-                bgcolor: index === 0 ? 'primary.solidBg' : 'background.level3',
-              }}
+              sx={[
+                {
+                  borderRadius: '50%',
+                  width: `max(${6 - index}px, 3px)`,
+                  height: `max(${6 - index}px, 3px)`,
+                },
+                index === 0
+                  ? { bgcolor: 'primary.solidBg' }
+                  : { bgcolor: 'background.level3' },
+              ]}
             />
           ))}
         </Box>

diff --git a/docs/data/joy/components/card/InstagramPost.tsx b/docs/data/joy/components/card/InstagramPost.tsx
@@ -73,12 +73,16 @@ export default function InstagramPost() {
           {[...Array(5)].map((_, index) => (
             <Box
               key={index}
-              sx={{
-                borderRadius: '50%',
-                width: `max(${6 - index}px, 3px)`,
-                height: `max(${6 - index}px, 3px)`,
-                bgcolor: index === 0 ? 'primary.solidBg' : 'background.level3',
-              }}
+              sx={[
+                {
+                  borderRadius: '50%',
+                  width: `max(${6 - index}px, 3px)`,
+                  height: `max(${6 - index}px, 3px)`,
+                },
+                index === 0
+                  ? { bgcolor: 'primary.solidBg' }
+                  : { bgcolor: 'background.level3' },
+              ]}
             />
           ))}
         </Box>

diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
@@ -25,11 +25,13 @@ export default function ExampleButtonCheckbox() {
       {['Mobile', 'Laptop', 'Monitor'].map((item) => (
         <ListItem key={item}>
           <ListItemDecorator
-            sx={{
-              zIndex: 2,
-              pointerEvents: 'none',
-              ...(value.includes(item) && { color: 'text.primary' }),
-            }}
+            sx={[
+              {
+                zIndex: 2,
+                pointerEvents: 'none',
+              },
+              value.includes(item) && { color: 'text.primary' },
+            ]}
           >
             {
               {

diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.tsx b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.tsx
@@ -25,11 +25,13 @@ export default function ExampleButtonCheckbox() {
       {['Mobile', 'Laptop', 'Monitor'].map((item) => (
         <ListItem key={item}>
           <ListItemDecorator
-            sx={{
-              zIndex: 2,
-              pointerEvents: 'none',
-              ...(value.includes(item) && { color: 'text.primary' }),
-            }}
+            sx={[
+              {
+                zIndex: 2,
+                pointerEvents: 'none',
+              },
+              value.includes(item) && { color: 'text.primary' },
+            ]}
           >
             {
               {

diff --git a/docs/data/joy/components/divider/DividerInCard.js b/docs/data/joy/components/divider/DividerInCard.js
@@ -26,7 +26,13 @@ export default function DividerInCard() {
       >
         <Typography sx={{ fontSize: 'lg', fontWeight: 'md' }}>Headline</Typography>
         <Divider />
-        <Box sx={{ display: orientation === 'horizontal' ? 'block' : 'contents' }}>
+        <Box
+          sx={[
+            orientation === 'horizontal'
+              ? { display: 'block' }
+              : { display: 'contents' },
+          ]}
+        >
           <Typography level="body-sm">
             Lorem Ipsum is simply dummy text of the printing and typesetting
             industry. Lorem Ipsum has been the industry standard dummy text ever
@@ -37,7 +43,10 @@ export default function DividerInCard() {
             variant="soft"
             color="neutral"
             endDecorator={<ArrowForward />}
-            sx={{ width: '100%', mt: orientation === 'horizontal' ? 2 : 0 }}
+            sx={[
+              { width: '100%' },
+              orientation === 'horizontal' ? { mt: 2 } : { mt: 0 },
+            ]}
           >
             See more
           </Button>

diff --git a/docs/data/joy/components/divider/DividerInCard.tsx b/docs/data/joy/components/divider/DividerInCard.tsx
@@ -27,7 +27,13 @@ export default function DividerInCard() {
       >
         <Typography sx={{ fontSize: 'lg', fontWeight: 'md' }}>Headline</Typography>
         <Divider />
-        <Box sx={{ display: orientation === 'horizontal' ? 'block' : 'contents' }}>
+        <Box
+          sx={[
+            orientation === 'horizontal'
+              ? { display: 'block' }
+              : { display: 'contents' },
+          ]}
+        >
           <Typography level="body-sm">
             Lorem Ipsum is simply dummy text of the printing and typesetting
             industry. Lorem Ipsum has been the industry standard dummy text ever
@@ -38,7 +44,10 @@ export default function DividerInCard() {
             variant="soft"
             color="neutral"
             endDecorator={<ArrowForward />}
-            sx={{ width: '100%', mt: orientation === 'horizontal' ? 2 : 0 }}
+            sx={[
+              { width: '100%' },
+              orientation === 'horizontal' ? { mt: 2 } : { mt: 0 },
+            ]}
           >
             See more
           </Button>

diff --git a/docs/data/joy/components/divider/DividerUsage.js b/docs/data/joy/components/divider/DividerUsage.js
@@ -38,21 +38,25 @@ export default function DividerUsage() {
             sx={{ width: 300, pb: 3 }}
           >
             <Sheet
-              sx={{
-                height: props.orientation === 'vertical' ? 120 : 40,
-                flexGrow: 1,
-                borderRadius: 'xs',
-                bgcolor: 'background.level3',
-              }}
+              sx={[
+                {
+                  flexGrow: 1,
+                  borderRadius: 'xs',
+                  bgcolor: 'background.level3',
+                },
+                props.orientation === 'vertical' ? { height: 120 } : { height: 40 },
+              ]}
             />
             <Divider {...props} />
             <Sheet
-              sx={{
-                height: props.orientation === 'vertical' ? 120 : 40,
-                flexGrow: 1,
-                borderRadius: 'xs',
-                bgcolor: 'background.level3',
-              }}
+              sx={[
+                {
+                  flexGrow: 1,
+                  borderRadius: 'xs',
+                  bgcolor: 'background.level3',
+                },
+                props.orientation === 'vertical' ? { height: 120 } : { height: 40 },
+              ]}
             />
           </Stack>
         </Sheet>

diff --git a/docs/data/joy/components/divider/DividerUsage.tsx b/docs/data/joy/components/divider/DividerUsage.tsx
@@ -38,21 +38,25 @@ export default function DividerUsage() {
             sx={{ width: 300, pb: 3 }}
           >
             <Sheet
-              sx={{
-                height: props.orientation === 'vertical' ? 120 : 40,
-                flexGrow: 1,
-                borderRadius: 'xs',
-                bgcolor: 'background.level3',
-              }}
+              sx={[
+                {
+                  flexGrow: 1,
+                  borderRadius: 'xs',
+                  bgcolor: 'background.level3',
+                },
+                props.orientation === 'vertical' ? { height: 120 } : { height: 40 },
+              ]}
             />
             <Divider {...props} />
             <Sheet
-              sx={{
-                height: props.orientation === 'vertical' ? 120 : 40,
-                flexGrow: 1,
-                borderRadius: 'xs',
-                bgcolor: 'background.level3',
-              }}
+              sx={[
+                {
+                  flexGrow: 1,
+                  borderRadius: 'xs',
+                  bgcolor: 'background.level3',
+                },
+                props.orientation === 'vertical' ? { height: 120 } : { height: 40 },
+              ]}
             />
           </Stack>
         </Sheet>