mui · siriwatknp · Mar 25, 2026 · Mar 23, 2026 · Mar 23, 2026 · Mar 24, 2026
diff --git a/docs/data/material/components/app-bar/DenseAppBar.js b/docs/data/material/components/app-bar/DenseAppBar.js
@@ -13,7 +13,13 @@ export default function DenseAppBar() {
           <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" color="inherit" component="div">
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{
+              color: 'inherit',
+            }}
+          >
             Photos
           </Typography>
         </Toolbar>

diff --git a/docs/data/material/components/app-bar/DenseAppBar.tsx b/docs/data/material/components/app-bar/DenseAppBar.tsx
@@ -13,7 +13,13 @@ export default function DenseAppBar() {
           <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" color="inherit" component="div">
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{
+              color: 'inherit',
+            }}
+          >
             Photos
           </Typography>
         </Toolbar>

diff --git a/docs/data/material/components/app-bar/DenseAppBar.tsx.preview b/docs/data/material/components/app-bar/DenseAppBar.tsx.preview
@@ -3,7 +3,13 @@
     <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
       <MenuIcon />
     </IconButton>
-    <Typography variant="h6" color="inherit" component="div">
+    <Typography
+      variant="h6"
+      component="div"
+      sx={{
+        color: 'inherit',
+      }}
+    >
       Photos
     </Typography>
   </Toolbar>

diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md
@@ -37,25 +37,11 @@ The demo below replaces the `<div>` with a `<section>` element:
 
 ## Customization
 
-### With the sx prop
-
 Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
 The demo below shows how to apply colors from the theme using this prop:
 
 {{"demo": "BoxSx.js", "defaultCodeOpen": true }}
 
-### With MUI System props
-
-:::info
-System props are deprecated and will be removed in the next major release. Please use the `sx` prop instead.
-
-```diff
-- <Box mt={2} />
-+ <Box sx={{ mt: 2 }} />
-```
-
-:::
-
 ## Anatomy
 
 The Box component is composed of a single root `<div>` element:

diff --git a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js b/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js
@@ -23,9 +23,11 @@ export default function ActiveLastBreadcrumb() {
         </Link>
         <Link
           underline="hover"
-          color="text.primary"
           href="/material-ui/react-breadcrumbs/"
           aria-current="page"
+          sx={{
+            color: 'text.primary',
+          }}
         >
           Breadcrumbs
         </Link>

diff --git a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx b/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx
@@ -23,9 +23,11 @@ export default function ActiveLastBreadcrumb() {
         </Link>
         <Link
           underline="hover"
-          color="text.primary"
           href="/material-ui/react-breadcrumbs/"
           aria-current="page"
+          sx={{
+            color: 'text.primary',
+          }}
         >
           Breadcrumbs
         </Link>

diff --git a/docs/data/material/components/buttons/ButtonBaseDemo.js b/docs/data/material/components/buttons/ButtonBaseDemo.js
@@ -102,13 +102,17 @@ export default function ButtonBaseDemo() {
             <Typography
               component="span"
               variant="subtitle1"
-              color="inherit"
-              sx={(theme) => ({
-                position: 'relative',
-                p: 4,
-                pt: 2,
-                pb: `calc(${theme.spacing(1)} + 6px)`,
-              })}
+              sx={[
+                {
+                  color: 'inherit',
+                },
+                (theme) => ({
+                  position: 'relative',
+                  p: 4,
+                  pt: 2,
+                  pb: `calc(${theme.spacing(1)} + 6px)`,
+                }),
+              ]}
             >
               {image.title}
               <ImageMarked className="MuiImageMarked-root" />

diff --git a/docs/data/material/components/buttons/ButtonBaseDemo.tsx b/docs/data/material/components/buttons/ButtonBaseDemo.tsx
@@ -102,13 +102,17 @@ export default function ButtonBaseDemo() {
             <Typography
               component="span"
               variant="subtitle1"
-              color="inherit"
-              sx={(theme) => ({
-                position: 'relative',
-                p: 4,
-                pt: 2,
-                pb: `calc(${theme.spacing(1)} + 6px)`,
-              })}
+              sx={[
+                {
+                  color: 'inherit',
+                },
+                (theme) => ({
+                  position: 'relative',
+                  p: 4,
+                  pt: 2,
+                  pb: `calc(${theme.spacing(1)} + 6px)`,
+                }),
+              ]}
             >
               {image.title}
               <ImageMarked className="MuiImageMarked-root" />

diff --git a/docs/data/material/components/cards/SelectActionCard.js b/docs/data/material/components/cards/SelectActionCard.js
@@ -53,7 +53,7 @@ function SelectActionCard() {
               <Typography variant="h5" component="div">
                 {card.title}
               </Typography>
-              <Typography variant="body2" color="text.secondary">
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                 {card.description}
               </Typography>
             </CardContent>

diff --git a/docs/data/material/components/cards/SelectActionCard.tsx b/docs/data/material/components/cards/SelectActionCard.tsx
@@ -53,7 +53,7 @@ function SelectActionCard() {
               <Typography variant="h5" component="div">
                 {card.title}
               </Typography>
-              <Typography variant="body2" color="text.secondary">
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                 {card.description}
               </Typography>
             </CardContent>

diff --git a/docs/data/material/components/lists/CustomizedList.js b/docs/data/material/components/lists/CustomizedList.js
@@ -69,9 +69,7 @@ export default function CustomizedList() {
                 primary="Firebash"
                 slotProps={{
                   primary: {
-                    fontSize: 20,
-                    fontWeight: 'medium',
-                    letterSpacing: 0,
+                    sx: { fontSize: 20, fontWeight: 'medium', letterSpacing: 0 },
                   },
                 }}
               />
@@ -87,7 +85,7 @@ export default function CustomizedList() {
                   slotProps={{
                     primary: {
                       color: 'primary',
-                      fontWeight: 'medium',
+                      sx: { fontWeight: 'medium' },
                       variant: 'body2',
                     },
                   }}
@@ -184,16 +182,20 @@ export default function CustomizedList() {
                   secondary="Authentication, Firestore Database, Realtime Database, Storage, Hosting, Functions, and Machine Learning"
                   slotProps={{
                     primary: {
-                      fontSize: 15,
-                      fontWeight: 'medium',
-                      lineHeight: '20px',
-                      mb: '2px',
+                      sx: {
+                        fontSize: 15,
+                        fontWeight: 'medium',
+                        lineHeight: '20px',
+                        mb: '2px',
+                      },
                     },
                     secondary: {
                       noWrap: true,
-                      fontSize: 12,
-                      lineHeight: '16px',
-                      color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)',
+                      sx: {
+                        fontSize: 12,
+                        lineHeight: '16px',
+                        color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)',
+                      },
                     },
                   }}
                   sx={{ my: 0 }}
@@ -226,7 +228,9 @@ export default function CustomizedList() {
                     </ListItemIcon>
                     <ListItemText
                       primary={item.label}
-                      slotProps={{ primary: { fontSize: 14, fontWeight: 'medium' } }}
+                      slotProps={{
+                        primary: { sx: { fontSize: 14, fontWeight: 'medium' } },
+                      }}
                     />
                   </ListItemButton>
                 ))}

diff --git a/docs/data/material/components/lists/CustomizedList.tsx b/docs/data/material/components/lists/CustomizedList.tsx
@@ -69,9 +69,7 @@ export default function CustomizedList() {
                 primary="Firebash"
                 slotProps={{
                   primary: {
-                    fontSize: 20,
-                    fontWeight: 'medium',
-                    letterSpacing: 0,
+                    sx: { fontSize: 20, fontWeight: 'medium', letterSpacing: 0 },
                   },
                 }}
               />
@@ -87,7 +85,7 @@ export default function CustomizedList() {
                   slotProps={{
                     primary: {
                       color: 'primary',
-                      fontWeight: 'medium',
+                      sx: { fontWeight: 'medium' },
                       variant: 'body2',
                     },
                   }}
@@ -184,16 +182,20 @@ export default function CustomizedList() {
                   secondary="Authentication, Firestore Database, Realtime Database, Storage, Hosting, Functions, and Machine Learning"
                   slotProps={{
                     primary: {
-                      fontSize: 15,
-                      fontWeight: 'medium',
-                      lineHeight: '20px',
-                      mb: '2px',
+                      sx: {
+                        fontSize: 15,
+                        fontWeight: 'medium',
+                        lineHeight: '20px',
+                        mb: '2px',
+                      },
                     },
                     secondary: {
                       noWrap: true,
-                      fontSize: 12,
-                      lineHeight: '16px',
-                      color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)',
+                      sx: {
+                        fontSize: 12,
+                        lineHeight: '16px',
+                        color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)',
+                      },
                     },
                   }}
                   sx={{ my: 0 }}
@@ -226,7 +228,9 @@ export default function CustomizedList() {
                     </ListItemIcon>
                     <ListItemText
                       primary={item.label}
-                      slotProps={{ primary: { fontSize: 14, fontWeight: 'medium' } }}
+                      slotProps={{
+                        primary: { sx: { fontSize: 14, fontWeight: 'medium' } },
+                      }}
                     />
                   </ListItemButton>
                 ))}

diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
@@ -615,9 +615,7 @@ export default function SearchIcons() {
         }}
       >
         <Form>
-          <Typography fontWeight={500} sx={{ mb: 1 }}>
-            Filter the style
-          </Typography>
+          <Typography sx={{ fontWeight: 500, mb: 1 }}>Filter the style</Typography>
           <RadioGroup
             value={theme}
             onChange={(event) => setTheme(event.target.value)}

diff --git a/docs/data/material/components/progress/CircularSize.js b/docs/data/material/components/progress/CircularSize.js
@@ -3,7 +3,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 
 export default function CircularSize() {
   return (
-    <Stack spacing={2} direction="row" alignItems="center">
+    <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
       <CircularProgress size="30px" />
       <CircularProgress size={40} />
       <CircularProgress size="3rem" />

diff --git a/docs/data/material/components/progress/CircularSize.tsx b/docs/data/material/components/progress/CircularSize.tsx
@@ -3,7 +3,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 
 export default function CircularSize() {
   return (
-    <Stack spacing={2} direction="row" alignItems="center">
+    <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
       <CircularProgress size="30px" />
       <CircularProgress size={40} />
       <CircularProgress size="3rem" />

diff --git a/docs/data/material/components/slider/MusicPlayerSlider.js b/docs/data/material/components/slider/MusicPlayerSlider.js
@@ -196,6 +196,7 @@ export default function MusicPlayerSlider() {
           spacing={2}
           direction="row"
           sx={(theme) => ({
+            alignItems: 'center',
             mb: 1,
             px: 1,
             '& > svg': {
@@ -205,7 +206,6 @@ export default function MusicPlayerSlider() {
               }),
             },
           })}
-          alignItems="center"
         >
           <VolumeDownRounded />
           <Slider

diff --git a/docs/data/material/components/slider/MusicPlayerSlider.tsx b/docs/data/material/components/slider/MusicPlayerSlider.tsx
@@ -196,6 +196,7 @@ export default function MusicPlayerSlider() {
           spacing={2}
           direction="row"
           sx={(theme) => ({
+            alignItems: 'center',
             mb: 1,
             px: 1,
             '& > svg': {
@@ -205,7 +206,6 @@ export default function MusicPlayerSlider() {
               }),
             },
           })}
-          alignItems="center"
         >
           <VolumeDownRounded />
           <Slider

diff --git a/docs/data/material/components/snackbars/FabIntegrationSnackbar.js b/docs/data/material/components/snackbars/FabIntegrationSnackbar.js
@@ -31,7 +31,13 @@ export default function FabIntegrationSnackbar() {
             >
               <MenuIcon />
             </IconButton>
-            <Typography variant="h6" color="inherit" component="div">
+            <Typography
+              variant="h6"
+              component="div"
+              sx={{
+                color: 'inherit',
+              }}
+            >
               App bar
             </Typography>
           </Toolbar>

diff --git a/docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx b/docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx
@@ -31,7 +31,13 @@ export default function FabIntegrationSnackbar() {
             >
               <MenuIcon />
             </IconButton>
-            <Typography variant="h6" color="inherit" component="div">
+            <Typography
+              variant="h6"
+              component="div"
+              sx={{
+                color: 'inherit',
+              }}
+            >
               App bar
             </Typography>
           </Toolbar>

diff --git a/docs/data/material/components/stack/stack.md b/docs/data/material/components/stack/stack.md
@@ -99,18 +99,15 @@ Below is an interactive demo that lets you explore the visual results of the dif
 
 {{"demo": "InteractiveStack.js", "hideToolbar": true, "bg": true}}
 
-## System props
+## Customization
 
-:::info
-System props are deprecated and will be removed in the next major release. Please use the `sx` prop instead.
+Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Stack instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package.
+Below is an example of how to apply center align items using this prop:
 
-```diff
-- <Stack mt={2} />
-+ <Stack sx={{ mt: 2 }} />
+```jsx
+<Stack sx={{ alignItems: 'center' }} />
 ```
 
-:::
-
 ## Limitations
 
 ### Margin on the children