diff --git a/docs/src/pages/components/rating/HalfRating.js b/docs/src/pages/components/rating/HalfRating.js
index 3beeb8f18d6b1a..a5597fe76ae5ec 100644
--- a/docs/src/pages/components/rating/HalfRating.js
+++ b/docs/src/pages/components/rating/HalfRating.js
@@ -1,6 +1,24 @@
 import React from 'react';
 import Rating from '@material-ui/lab/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() {
-  return <Rating name="half-rating" defaultValue={2.5} precision={0.5} />;
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
+      <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
+    </div>
+  );
 }
diff --git a/docs/src/pages/components/rating/HalfRating.tsx b/docs/src/pages/components/rating/HalfRating.tsx
index 3beeb8f18d6b1a..730ef30d06630d 100644
--- a/docs/src/pages/components/rating/HalfRating.tsx
+++ b/docs/src/pages/components/rating/HalfRating.tsx
@@ -1,6 +1,26 @@
 import React from 'react';
 import Rating from '@material-ui/lab/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() {
-  return <Rating name="half-rating" defaultValue={2.5} precision={0.5} />;
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
+      <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
+    </div>
+  );
 }
diff --git a/docs/src/pages/components/rating/HoverRating.js b/docs/src/pages/components/rating/HoverRating.js
index cf11938db9e131..761a8b555c7345 100644
--- a/docs/src/pages/components/rating/HoverRating.js
+++ b/docs/src/pages/components/rating/HoverRating.js
@@ -17,7 +17,7 @@ const labels = {
 };
 
 const useStyles = makeStyles({
-  rating: {
+  root: {
     width: 200,
     display: 'flex',
     alignItems: 'center',
@@ -30,7 +30,7 @@ export default function HoverRating() {
   const classes = useStyles();
 
   return (
-    <div className={classes.rating}>
+    <div className={classes.root}>
       <Rating
         name="hover-feedback"
         value={value}
diff --git a/docs/src/pages/components/rating/HoverRating.tsx b/docs/src/pages/components/rating/HoverRating.tsx
index 5de615b57820e1..f047e1c2d4d507 100644
--- a/docs/src/pages/components/rating/HoverRating.tsx
+++ b/docs/src/pages/components/rating/HoverRating.tsx
@@ -17,7 +17,7 @@ const labels: { [index: string]: string } = {
 };
 
 const useStyles = makeStyles({
-  rating: {
+  root: {
     width: 200,
     display: 'flex',
     alignItems: 'center',
@@ -30,7 +30,7 @@ export default function HoverRating() {
   const classes = useStyles();
 
   return (
-    <div className={classes.rating}>
+    <div className={classes.root}>
       <Rating
         name="hover-feedback"
         value={value}
diff --git a/docs/src/pages/components/rating/RatingSize.js b/docs/src/pages/components/rating/RatingSize.js
index 13a89e0d6a8bcc..37a5ef009bcc11 100644
--- a/docs/src/pages/components/rating/RatingSize.js
+++ b/docs/src/pages/components/rating/RatingSize.js
@@ -1,13 +1,25 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/lab/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();
 
-export default function RatingSize() {
   return (
-    <Box display="flex" flexDirection="column">
+    <div className={classes.root}>
       <Rating name="size-small" defaultValue={2} size="small" />
       <Rating name="size-medium" defaultValue={2} />
       <Rating name="size-large" defaultValue={2} size="large" />
-    </Box>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/rating/RatingSize.tsx b/docs/src/pages/components/rating/RatingSize.tsx
index 13a89e0d6a8bcc..a58bef1336230d 100644
--- a/docs/src/pages/components/rating/RatingSize.tsx
+++ b/docs/src/pages/components/rating/RatingSize.tsx
@@ -1,13 +1,27 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/lab/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();
 
-export default function RatingSize() {
   return (
-    <Box display="flex" flexDirection="column">
+    <div className={classes.root}>
       <Rating name="size-small" defaultValue={2} size="small" />
       <Rating name="size-medium" defaultValue={2} />
       <Rating name="size-large" defaultValue={2} size="large" />
-    </Box>
+    </div>
   );
 }
diff --git a/packages/material-ui-lab/src/Rating/Rating.js b/packages/material-ui-lab/src/Rating/Rating.js
index 2089fd52135f8d..a105c3caca973f 100644
--- a/packages/material-ui-lab/src/Rating/Rating.js
+++ b/packages/material-ui-lab/src/Rating/Rating.js
@@ -352,7 +352,11 @@ const Rating = React.forwardRef(function Rating(props, ref) {
     );
 
     if (readOnly) {
-      return <React.Fragment key={state.value}>{container}</React.Fragment>;
+      return (
+        <span key={state.value} {...labelProps}>
+          {container}
+        </span>
+      );
     }
 
     return (