diff --git a/docs/src/pages/components/rating/BasicRating.js b/docs/src/pages/components/rating/BasicRating.js
index 34d18da7d5daf1..3a8d75b58220bc 100644
--- a/docs/src/pages/components/rating/BasicRating.js
+++ b/docs/src/pages/components/rating/BasicRating.js
@@ -1,22 +1,17 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/Rating';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > legend': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
 export default function BasicRating() {
-  const classes = useStyles();
   const [value, setValue] = React.useState(2);
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > legend': { mt: 2 },
+      }}
+    >
       <Typography component="legend">Controlled</Typography>
       <Rating
         name="simple-controlled"
@@ -31,6 +26,6 @@ export default function BasicRating() {
       <Rating name="disabled" value={value} disabled />
       <Typography component="legend">No rating given</Typography>
       <Rating name="no-value" value={null} />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/BasicRating.tsx b/docs/src/pages/components/rating/BasicRating.tsx
index acbfbb92f7594e..849a20abc88f64 100644
--- a/docs/src/pages/components/rating/BasicRating.tsx
+++ b/docs/src/pages/components/rating/BasicRating.tsx
@@ -1,24 +1,17 @@
 import * as React from 'react';
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/Rating';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      '& > legend': {
-        marginTop: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 export default function BasicRating() {
-  const classes = useStyles();
   const [value, setValue] = React.useState<number | null>(2);
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > legend': { mt: 2 },
+      }}
+    >
       <Typography component="legend">Controlled</Typography>
       <Rating
         name="simple-controlled"
@@ -33,6 +26,6 @@ export default function BasicRating() {
       <Rating name="disabled" value={value} disabled />
       <Typography component="legend">No rating given</Typography>
       <Rating name="no-value" value={null} />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/CustomizedRating.js b/docs/src/pages/components/rating/CustomizedRating.js
index 72c6bb5725cf0d..7599b7dac1b323 100644
--- a/docs/src/pages/components/rating/CustomizedRating.js
+++ b/docs/src/pages/components/rating/CustomizedRating.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/Rating';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
@@ -11,22 +12,14 @@ import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltO
 import SentimentVerySatisfiedIcon from '@material-ui/icons/SentimentVerySatisfied';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > legend': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
-const StyledRating = withStyles({
-  iconFilled: {
+const StyledRating = styled(Rating)({
+  '& .MuiRating-iconFilled': {
     color: '#ff6d75',
   },
-  iconHover: {
+  '& .MuiRating-iconHover': {
     color: '#ff3d47',
   },
-})(Rating);
+});
 
 const customIcons = {
   1: {
@@ -61,10 +54,12 @@ IconContainer.propTypes = {
 };
 
 export default function CustomizedRating() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > legend': { mt: 2 },
+      }}
+    >
       <Typography component="legend">Custom icon and color</Typography>
       <StyledRating
         name="customized-color"
@@ -83,6 +78,6 @@ export default function CustomizedRating() {
         getLabelText={(value) => customIcons[value].label}
         IconContainerComponent={IconContainer}
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/CustomizedRating.tsx b/docs/src/pages/components/rating/CustomizedRating.tsx
index d027bf6ae45a0c..19ed434df8ed8a 100644
--- a/docs/src/pages/components/rating/CustomizedRating.tsx
+++ b/docs/src/pages/components/rating/CustomizedRating.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles, createStyles, withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Rating, { IconContainerProps } from '@material-ui/core/Rating';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
@@ -10,24 +11,14 @@ import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltO
 import SentimentVerySatisfiedIcon from '@material-ui/icons/SentimentVerySatisfied';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      '& > legend': {
-        marginTop: theme.spacing(2),
-      },
-    },
-  }),
-);
-
-const StyledRating = withStyles({
-  iconFilled: {
+const StyledRating = styled(Rating)({
+  '& .MuiRating-iconFilled': {
     color: '#ff6d75',
   },
-  iconHover: {
+  '& .MuiRating-iconHover': {
     color: '#ff3d47',
   },
-})(Rating);
+});
 
 const customIcons: {
   [index: string]: {
@@ -63,10 +54,12 @@ function IconContainer(props: IconContainerProps) {
 }
 
 export default function CustomizedRating() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > legend': { mt: 2 },
+      }}
+    >
       <Typography component="legend">Custom icon and color</Typography>
       <StyledRating
         name="customized-color"
@@ -85,6 +78,6 @@ export default function CustomizedRating() {
         getLabelText={(value: number) => customIcons[value].label}
         IconContainerComponent={IconContainer}
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/HalfRating.js b/docs/src/pages/components/rating/HalfRating.js
index b0da298a76d8e6..3d9f193bee5f77 100644
--- a/docs/src/pages/components/rating/HalfRating.js
+++ b/docs/src/pages/components/rating/HalfRating.js
@@ -1,24 +1,19 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/Rating';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > * + *': {
-      marginTop: theme.spacing(1),
-    },
-  },
-}));
 
 export default function HalfRating() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        // TODO Replace with Stack
+        '& > :not(style) + :not(style)': { mt: 1 },
+      }}
+    >
       <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
       <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/HalfRating.tsx b/docs/src/pages/components/rating/HalfRating.tsx
index 33fee2894789c2..3d9f193bee5f77 100644
--- a/docs/src/pages/components/rating/HalfRating.tsx
+++ b/docs/src/pages/components/rating/HalfRating.tsx
@@ -1,26 +1,19 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/Rating';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      '& > * + *': {
-        marginTop: theme.spacing(1),
-      },
-    },
-  }),
-);
 
 export default function HalfRating() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        // TODO Replace with Stack
+        '& > :not(style) + :not(style)': { mt: 1 },
+      }}
+    >
       <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
       <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/HoverRating.js b/docs/src/pages/components/rating/HoverRating.js
index aba5429d7c2cfb..2d8d76cda1f8db 100644
--- a/docs/src/pages/components/rating/HoverRating.js
+++ b/docs/src/pages/components/rating/HoverRating.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Rating from '@material-ui/core/Rating';
 import Box from '@material-ui/core/Box';
 import StarIcon from '@material-ui/icons/Star';
@@ -17,21 +16,18 @@ const labels = {
   5: 'Excellent+',
 };
 
-const useStyles = makeStyles({
-  root: {
-    width: 200,
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
 export default function HoverRating() {
   const [value, setValue] = React.useState(2);
   const [hover, setHover] = React.useState(-1);
-  const classes = useStyles();
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: 200,
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
       <Rating
         name="hover-feedback"
         value={value}
@@ -47,6 +43,6 @@ export default function HoverRating() {
       {value !== null && (
         <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/HoverRating.tsx b/docs/src/pages/components/rating/HoverRating.tsx
index e13c8a7d26eb74..0d34b32f10976b 100644
--- a/docs/src/pages/components/rating/HoverRating.tsx
+++ b/docs/src/pages/components/rating/HoverRating.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Rating from '@material-ui/core/Rating';
 import Box from '@material-ui/core/Box';
 import StarIcon from '@material-ui/icons/Star';
@@ -17,21 +16,18 @@ const labels: { [index: string]: string } = {
   5: 'Excellent+',
 };
 
-const useStyles = makeStyles({
-  root: {
-    width: 200,
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
 export default function HoverRating() {
   const [value, setValue] = React.useState<number | null>(2);
   const [hover, setHover] = React.useState(-1);
-  const classes = useStyles();
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: 200,
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
       <Rating
         name="hover-feedback"
         value={value}
@@ -47,6 +43,6 @@ export default function HoverRating() {
       {value !== null && (
         <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/RatingSize.js b/docs/src/pages/components/rating/RatingSize.js
index 065e05c89a8f2a..a49ea1ac4099be 100644
--- a/docs/src/pages/components/rating/RatingSize.js
+++ b/docs/src/pages/components/rating/RatingSize.js
@@ -1,25 +1,20 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/Rating';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    '& > * + *': {
-      marginTop: theme.spacing(1),
-    },
-  },
-}));
 
 export default function HalfRating() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        // TODO Replace with Stack
+        '& > :not(style) + :not(style)': { mt: 1 },
+      }}
+    >
       <Rating name="size-small" defaultValue={2} size="small" />
       <Rating name="size-medium" defaultValue={2} />
       <Rating name="size-large" defaultValue={2} size="large" />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/RatingSize.tsx b/docs/src/pages/components/rating/RatingSize.tsx
index 154334958fa5a4..a49ea1ac4099be 100644
--- a/docs/src/pages/components/rating/RatingSize.tsx
+++ b/docs/src/pages/components/rating/RatingSize.tsx
@@ -1,27 +1,20 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/Rating';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      '& > * + *': {
-        marginTop: theme.spacing(1),
-      },
-    },
-  }),
-);
 
 export default function HalfRating() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        // TODO Replace with Stack
+        '& > :not(style) + :not(style)': { mt: 1 },
+      }}
+    >
       <Rating name="size-small" defaultValue={2} size="small" />
       <Rating name="size-medium" defaultValue={2} />
       <Rating name="size-large" defaultValue={2} size="large" />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/TextRating.js b/docs/src/pages/components/rating/TextRating.js
index 729067d7f21b45..5e191c965847ea 100644
--- a/docs/src/pages/components/rating/TextRating.js
+++ b/docs/src/pages/components/rating/TextRating.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Rating from '@material-ui/core/Rating';
 import Box from '@material-ui/core/Box';
+import Rating from '@material-ui/core/Rating';
 import StarIcon from '@material-ui/icons/Star';
 
 const labels = {
@@ -17,20 +16,17 @@ const labels = {
   5: 'Excellent+',
 };
 
-const useStyles = makeStyles({
-  root: {
-    width: 200,
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
 export default function TextRating() {
-  const classes = useStyles();
   const value = 3.5;
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: 200,
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
       <Rating
         name="text-feedback"
         value={value}
@@ -39,6 +35,6 @@ export default function TextRating() {
         emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
       />
       <Box sx={{ ml: 2 }}>{labels[value]}</Box>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/TextRating.tsx b/docs/src/pages/components/rating/TextRating.tsx
index 357241d72128dd..c5195f5660bd8a 100644
--- a/docs/src/pages/components/rating/TextRating.tsx
+++ b/docs/src/pages/components/rating/TextRating.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Rating from '@material-ui/core/Rating';
 import Box from '@material-ui/core/Box';
+import Rating from '@material-ui/core/Rating';
 import StarIcon from '@material-ui/icons/Star';
 
 const labels: { [index: string]: string } = {
@@ -17,20 +16,17 @@ const labels: { [index: string]: string } = {
   5: 'Excellent+',
 };
 
-const useStyles = makeStyles({
-  root: {
-    width: 200,
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
 export default function TextRating() {
-  const classes = useStyles();
   const value = 3.5;
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: 200,
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
       <Rating
         name="text-feedback"
         value={value}
@@ -39,6 +35,6 @@ export default function TextRating() {
         emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
       />
       <Box sx={{ ml: 2 }}>{labels[value]}</Box>
-    </div>
+    </Box>
   );
 }