mui · eps1lon · Nov 13, 2020 · Oct 27, 2020 · Oct 27, 2020 · Oct 27, 2020
diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
@@ -169,7 +169,7 @@ function AppDrawer(props) {
         </div>
       </div>
       <Divider />
-      <Box mx={3} my={2}>
+      <Box sx={{ mx: 3, my: 2 }}>
         <DiamondSponsors spot="drawer" />
       </Box>
       {navItems}

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -257,7 +257,7 @@ function AppFrame(props) {
                   {language.text}
                 </MenuItem>
               ))}
-              <Box my={1}>
+              <Box sx={{ my: 1 }}>
                 <Divider />
               </Box>
               <MenuItem

diff --git a/docs/src/pages/components/app-bar/BackToTop.js b/docs/src/pages/components/app-bar/BackToTop.js
@@ -74,7 +74,7 @@ export default function BackToTop(props) {
       </AppBar>
       <Toolbar id="back-to-top-anchor" />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.

diff --git a/docs/src/pages/components/app-bar/BackToTop.tsx b/docs/src/pages/components/app-bar/BackToTop.tsx
@@ -75,7 +75,7 @@ export default function BackToTop(props: Props) {
       </AppBar>
       <Toolbar id="back-to-top-anchor" />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.

diff --git a/docs/src/pages/components/app-bar/ElevateAppBar.js b/docs/src/pages/components/app-bar/ElevateAppBar.js
@@ -46,7 +46,7 @@ export default function ElevateAppBar(props) {
       </ElevationScroll>
       <Toolbar />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.

diff --git a/docs/src/pages/components/app-bar/ElevateAppBar.tsx b/docs/src/pages/components/app-bar/ElevateAppBar.tsx
@@ -45,7 +45,7 @@ export default function ElevateAppBar(props: Props) {
       </ElevationScroll>
       <Toolbar />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.

diff --git a/docs/src/pages/components/app-bar/HideAppBar.js b/docs/src/pages/components/app-bar/HideAppBar.js
@@ -47,7 +47,7 @@ export default function HideAppBar(props) {
       </HideOnScroll>
       <Toolbar />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.

diff --git a/docs/src/pages/components/app-bar/HideAppBar.tsx b/docs/src/pages/components/app-bar/HideAppBar.tsx
@@ -46,7 +46,7 @@ export default function HideAppBar(props: Props) {
       </HideOnScroll>
       <Toolbar />
       <Container>
-        <Box my={2}>
+        <Box sx={{ my: 2 }}>
           {[...new Array(12)]
             .map(
               () => `Cras mattis consectetur purus sit amet fermentum.

diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js
@@ -27,7 +27,7 @@ function TabPanel(props) {
       aria-labelledby={`action-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
     </Typography>
   );
 }

diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx
@@ -38,7 +38,7 @@ function TabPanel(props: TabPanelProps) {
       aria-labelledby={`action-tab-${index}`}
       {...other}
     >
-      {value === index && <Box p={3}>{children}</Box>}
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
     </Typography>
   );
 }

diff --git a/docs/src/pages/components/no-ssr/SimpleNoSsr.js b/docs/src/pages/components/no-ssr/SimpleNoSsr.js
@@ -5,11 +5,19 @@ import Box from '@material-ui/core/Box';
 export default function SimpleNoSsr() {
   return (
     <div>
-      <Box p={2} bgcolor="primary.main" color="primary.contrastText">
+      <Box
+        sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}
+      >
         Server and Client
       </Box>
       <NoSsr>
-        <Box p={2} bgcolor="secondary.main" color="primary.contrastText">
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: 'secondary.main',
+            color: 'primary.contrastText',
+          }}
+        >
           Client only
         </Box>
       </NoSsr>

diff --git a/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx b/docs/src/pages/components/no-ssr/SimpleNoSsr.tsx
@@ -5,11 +5,19 @@ import Box from '@material-ui/core/Box';
 export default function SimpleNoSsr() {
   return (
     <div>
-      <Box p={2} bgcolor="primary.main" color="primary.contrastText">
+      <Box
+        sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}
+      >
         Server and Client
       </Box>
       <NoSsr>
-        <Box p={2} bgcolor="secondary.main" color="primary.contrastText">
+        <Box
+          sx={{
+            p: 2,
+            bgcolor: 'secondary.main',
+            color: 'primary.contrastText',
+          }}
+        >
           Client only
         </Box>
       </NoSsr>

diff --git a/docs/src/pages/components/popover/PopoverPopupState.js b/docs/src/pages/components/popover/PopoverPopupState.js
@@ -24,7 +24,7 @@ export default function PopoverPopupState() {
               horizontal: 'center',
             }}
           >
-            <Box p={2}>
+            <Box sx={{ p: 2 }}>
               <Typography>The content of the Popover.</Typography>
             </Box>
           </Popover>

diff --git a/docs/src/pages/components/popover/PopoverPopupState.tsx b/docs/src/pages/components/popover/PopoverPopupState.tsx
@@ -24,7 +24,7 @@ export default function PopoverPopupState() {
               horizontal: 'center',
             }}
           >
-            <Box p={2}>
+            <Box sx={{ p: 2 }}>
               <Typography>The content of the Popover.</Typography>
             </Box>
           </Popover>

diff --git a/docs/src/pages/components/progress/CircularWithValueLabel.js b/docs/src/pages/components/progress/CircularWithValueLabel.js
@@ -6,17 +6,19 @@ import Box from '@material-ui/core/Box';
 
 function CircularProgressWithLabel(props) {
   return (
-    <Box position="relative" display="inline-flex">
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
       <CircularProgress variant="determinate" {...props} />
       <Box
-        top={0}
-        left={0}
-        bottom={0}
-        right={0}
-        position="absolute"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
       >
         <Typography variant="caption" component="div" color="textSecondary">
           {`${Math.round(props.value)}%`}

diff --git a/docs/src/pages/components/progress/CircularWithValueLabel.tsx b/docs/src/pages/components/progress/CircularWithValueLabel.tsx
@@ -9,17 +9,19 @@ function CircularProgressWithLabel(
   props: CircularProgressProps & { value: number },
 ) {
   return (
-    <Box position="relative" display="inline-flex">
+    <Box sx={{ position: 'relative', display: 'inline-flex' }}>
       <CircularProgress variant="determinate" {...props} />
       <Box
-        top={0}
-        left={0}
-        bottom={0}
-        right={0}
-        position="absolute"
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
       >
         <Typography
           variant="caption"

diff --git a/docs/src/pages/components/progress/LinearWithValueLabel.js b/docs/src/pages/components/progress/LinearWithValueLabel.js
@@ -7,11 +7,11 @@ import Box from '@material-ui/core/Box';
 
 function LinearProgressWithLabel(props) {
   return (
-    <Box display="flex" alignItems="center">
-      <Box width="100%" mr={1}>
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
         <LinearProgress variant="determinate" {...props} />
       </Box>
-      <Box minWidth={35}>
+      <Box sx={{ minWidth: 35 }}>
         <Typography variant="body2" color="textSecondary">{`${Math.round(
           props.value,
         )}%`}</Typography>

diff --git a/docs/src/pages/components/progress/LinearWithValueLabel.tsx b/docs/src/pages/components/progress/LinearWithValueLabel.tsx
@@ -10,11 +10,11 @@ function LinearProgressWithLabel(
   props: LinearProgressProps & { value: number },
 ) {
   return (
-    <Box display="flex" alignItems="center">
-      <Box width="100%" mr={1}>
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
         <LinearProgress variant="determinate" {...props} />
       </Box>
-      <Box minWidth={35}>
+      <Box sx={{ minWidth: 35 }}>
         <Typography variant="body2" color="textSecondary">{`${Math.round(
           props.value,
         )}%`}</Typography>

diff --git a/docs/src/pages/components/rating/HoverRating.js b/docs/src/pages/components/rating/HoverRating.js
@@ -45,7 +45,7 @@ export default function HoverRating() {
         emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
       />
       {value !== null && (
-        <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>
+        <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
       )}
     </div>
   );

diff --git a/docs/src/pages/components/rating/HoverRating.tsx b/docs/src/pages/components/rating/HoverRating.tsx
@@ -45,7 +45,7 @@ export default function HoverRating() {
         emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
       />
       {value !== null && (
-        <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>
+        <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
       )}
     </div>
   );

diff --git a/docs/src/pages/components/rating/TextRating.js b/docs/src/pages/components/rating/TextRating.js
@@ -38,7 +38,7 @@ export default function TextRating() {
         precision={0.5}
         emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
       />
-      <Box ml={2}>{labels[value]}</Box>
+      <Box sx={{ ml: 2 }}>{labels[value]}</Box>
     </div>
   );
 }
diff --git a/docs/src/pages/components/rating/TextRating.tsx b/docs/src/pages/components/rating/TextRating.tsx
@@ -38,7 +38,7 @@ export default function TextRating() {
         precision={0.5}
         emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
       />
-      <Box ml={2}>{labels[value]}</Box>
+      <Box sx={{ ml: 2 }}>{labels[value]}</Box>
     </div>
   );
 }
diff --git a/docs/src/pages/components/skeleton/SkeletonChildren.js b/docs/src/pages/components/skeleton/SkeletonChildren.js
@@ -19,8 +19,8 @@ function SkeletonChildrenDemo(props) {
 
   return (
     <div>
-      <Box display="flex" alignItems="center">
-        <Box margin={1}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ margin: 1 }}>
           {loading ? (
             <Skeleton variant="circular">
               <Avatar />
@@ -29,7 +29,7 @@ function SkeletonChildrenDemo(props) {
             <Avatar src="https://pbs.twimg.com/profile_images/877631054525472768/Xp5FAPD5_reasonably_small.jpg" />
           )}
         </Box>
-        <Box width="100%">
+        <Box sx={{ width: '100%' }}>
           {loading ? (
             <Skeleton width="100%">
               <Typography>.</Typography>

diff --git a/docs/src/pages/components/skeleton/SkeletonChildren.tsx b/docs/src/pages/components/skeleton/SkeletonChildren.tsx
@@ -18,8 +18,8 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
 
   return (
     <div>
-      <Box display="flex" alignItems="center">
-        <Box margin={1}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ margin: 1 }}>
           {loading ? (
             <Skeleton variant="circular">
               <Avatar />
@@ -28,7 +28,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
             <Avatar src="https://pbs.twimg.com/profile_images/877631054525472768/Xp5FAPD5_reasonably_small.jpg" />
           )}
         </Box>
-        <Box width="100%">
+        <Box sx={{ width: '100%' }}>
           {loading ? (
             <Skeleton width="100%">
               <Typography>.</Typography>

diff --git a/docs/src/pages/components/skeleton/YouTube.js b/docs/src/pages/components/skeleton/YouTube.js
@@ -38,7 +38,7 @@ function Media(props) {
   return (
     <Grid container wrap="nowrap">
       {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
-        <Box key={index} width={210} marginRight={0.5} my={5}>
+        <Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
           {item ? (
             <img
               style={{ width: 210, height: 118 }}
@@ -50,7 +50,7 @@ function Media(props) {
           )}
 
           {item ? (
-            <Box pr={2}>
+            <Box sx={{ pr: 2 }}>
               <Typography gutterBottom variant="body2">
                 {item.title}
               </Typography>
@@ -66,7 +66,7 @@ function Media(props) {
               </Typography>
             </Box>
           ) : (
-            <Box pt={0.5}>
+            <Box sx={{ pt: 0.5 }}>
               <Skeleton />
               <Skeleton width="60%" />
             </Box>
@@ -83,7 +83,7 @@ Media.propTypes = {
 
 export default function YouTube() {
   return (
-    <Box overflow="hidden">
+    <Box sx={{ overflow: 'hidden' }}>
       <Media loading />
       <Media />
     </Box>

diff --git a/docs/src/pages/components/skeleton/YouTube.tsx b/docs/src/pages/components/skeleton/YouTube.tsx
@@ -41,7 +41,7 @@ function Media(props: MediaProps) {
   return (
     <Grid container wrap="nowrap">
       {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
-        <Box key={index} width={210} marginRight={0.5} my={5}>
+        <Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
           {item ? (
             <img
               style={{ width: 210, height: 118 }}
@@ -52,7 +52,7 @@ function Media(props: MediaProps) {
             <Skeleton variant="rectangular" width={210} height={118} />
           )}
           {item ? (
-            <Box pr={2}>
+            <Box sx={{ pr: 2 }}>
               <Typography gutterBottom variant="body2">
                 {item.title}
               </Typography>
@@ -68,7 +68,7 @@ function Media(props: MediaProps) {
               </Typography>
             </Box>
           ) : (
-            <Box pt={0.5}>
+            <Box sx={{ pt: 0.5 }}>
               <Skeleton />
               <Skeleton width="60%" />
             </Box>
@@ -81,7 +81,7 @@ function Media(props: MediaProps) {
 
 export default function YouTube() {
   return (
-    <Box overflow="hidden">
+    <Box sx={{ overflow: 'hidden' }}>
       <Media loading />
       <Media />
     </Box>

diff --git a/docs/src/pages/components/tables/CollapsibleTable.js b/docs/src/pages/components/tables/CollapsibleTable.js
@@ -74,7 +74,7 @@ function Row(props) {
       <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
           <Collapse in={open} timeout="auto" unmountOnExit>
-            <Box margin={1}>
+            <Box sx={{ margin: 1 }}>
               <Typography variant="h6" gutterBottom component="div">
                 History
               </Typography>