Use sx prop applystyles array syntax in docs

DiegoAndai · Dec 20, 2024 · 464ffb4 · 464ffb4
1 parent be9b07b
commit 464ffb4
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/docs/data/material/customization/css-theme-variables/configuration.md b/docs/data/material/customization/css-theme-variables/configuration.md
@@ -136,22 +136,26 @@ If you have such a condition, replace it with the [`theme.applyStyles()` functio
  function App() {
    return (
      <Card
-       sx={(theme) => ({
+-       sx={(theme) => ({
 -        backgroundColor: theme.palette.mode === 'dark' ? '#000' : '#fff',
 -        '&:hover': {
 -          backgroundColor: theme.palette.mode === 'dark' ? '#333' : '#f5f5f5',
 -        },
-+        backgroundColor: '#fff',
-+        '&:hover': {
-+          backgroundColor: '#f5f5f5',
-+          ...theme.applyStyles('dark', {
-+            backgroundColor: '#333',
+-      })}
++       sx={(theme) => [
++          {
++            backgroundColor: '#fff',
++            '&:hover': {
++              backgroundColor: '#f5f5f5',
++            },
++          },
++          theme.applyStyles('dark', {
++            backgroundColor: '#000',
++            '&:hover': {
++              backgroundColor: '#333',
++            },
 +          }),
-+        },
-+        ...theme.applyStyles('dark', {
-+          backgroundColor: '#000',
-+        }),
-       })}
++        ]}
      />
    );
  }