Use applyStyles array syntax everywhere on docs

mui · Dec 20, 2024 · 649d41d · 649d41d
1 parent 46ac404
commit 649d41d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 23 deletions.
diff --git a/docs/data/material/customization/css-theme-variables/usage.md b/docs/data/material/customization/css-theme-variables/usage.md
@@ -56,12 +56,15 @@ The example below shows how to customize the Card component for dark mode:
 import Card from '@mui/material/Card';
 
 <Card
-  sx={(theme) => ({
-    backgroundColor: theme.vars.palette.background.default,
-    ...theme.applyStyles('dark', {
-      backgroundColor: theme.vars.palette.grey[50],
+  sx={[
+    (theme) => ({
+      backgroundColor: theme.vars.palette.background.default,
     }),
-  })}
+    (theme) =>
+      theme.applyStyles('dark', {
+        backgroundColor: theme.vars.palette.grey[50],
+      }),
+  ]}
 />;
 ```
 

diff --git a/docs/data/material/customization/dark-mode/dark-mode.md b/docs/data/material/customization/dark-mode/dark-mode.md
@@ -186,20 +186,22 @@ With the `styled` function:
 ```jsx
 import { styled } from '@mui/material/styles';
 
-const MyComponent = styled('div')(({ theme }) => ({
-  color: '#fff',
-  backgroundColor: theme.palette.primary.main,
-  ...theme.applyStyles('dark', {
+const MyComponent = styled('div')(({ theme }) => [
+  {
+    color: '#fff',
+    backgroundColor: theme.palette.primary.main,
+    '&:hover': {
+      boxShadow: theme.shadows[3],
+      backgroundColor: theme.palette.primary.dark,
+    },
+  },
+  theme.applyStyles('dark', {
     backgroundColor: theme.palette.secondary.main,
-  }),
-  '&:hover': {
-    boxShadow: theme.shadows[3],
-    backgroundColor: theme.palette.primary.dark,
-    ...theme.applyStyles('dark', {
+    '&:hover': {
       backgroundColor: theme.palette.secondary.dark,
-    }),
-  },
-}));
+    },
+  }),
+]);
 ```
 
 With the `sx` prop:
@@ -212,17 +214,18 @@ import Button from '@mui/material/Button';
     (theme) => ({
       color: '#fff',
       backgroundColor: theme.palette.primary.main,
-      ...theme.applyStyles('dark', {
-        backgroundColor: theme.palette.secondary.main,
-      }),
       '&:hover': {
         boxShadow: theme.shadows[3],
         backgroundColor: theme.palette.primary.dark,
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.secondary.dark,
-        }),
       },
     }),
+    (theme) =>
+      theme.applyStyles('dark', {
+        backgroundColor: theme.palette.secondary.main,
+        '&:hover': {
+          backgroundColor: theme.palette.secondary.dark,
+        },
+      }),
   ]}
 >
   Submit