diff --git a/docs/src/pages/components/container/FixedContainer.js b/docs/src/pages/components/container/FixedContainer.js
index 535073a89e48c2..d6f8d2dce1a571 100644
--- a/docs/src/pages/components/container/FixedContainer.js
+++ b/docs/src/pages/components/container/FixedContainer.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
 
 export default function FixedContainer() {
@@ -8,13 +8,7 @@ export default function FixedContainer() {
     <React.Fragment>
       <CssBaseline />
       <Container fixed>
-        <Typography
-          component="div"
-          style={{
-            backgroundColor: '#cfe8fc',
-            height: '100vh',
-          }}
-        />
+        <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
       </Container>
     </React.Fragment>
   );
diff --git a/docs/src/pages/components/container/FixedContainer.tsx b/docs/src/pages/components/container/FixedContainer.tsx
index 535073a89e48c2..d6f8d2dce1a571 100644
--- a/docs/src/pages/components/container/FixedContainer.tsx
+++ b/docs/src/pages/components/container/FixedContainer.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
 
 export default function FixedContainer() {
@@ -8,13 +8,7 @@ export default function FixedContainer() {
     <React.Fragment>
       <CssBaseline />
       <Container fixed>
-        <Typography
-          component="div"
-          style={{
-            backgroundColor: '#cfe8fc',
-            height: '100vh',
-          }}
-        />
+        <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
       </Container>
     </React.Fragment>
   );
diff --git a/docs/src/pages/components/container/SimpleContainer.js b/docs/src/pages/components/container/SimpleContainer.js
index 3c7f0d8af79ff4..a6aedaf6383cbc 100644
--- a/docs/src/pages/components/container/SimpleContainer.js
+++ b/docs/src/pages/components/container/SimpleContainer.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
 
 export default function SimpleContainer() {
@@ -8,13 +8,7 @@ export default function SimpleContainer() {
     <React.Fragment>
       <CssBaseline />
       <Container maxWidth="sm">
-        <Typography
-          component="div"
-          style={{
-            backgroundColor: '#cfe8fc',
-            height: '100vh',
-          }}
-        />
+        <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
       </Container>
     </React.Fragment>
   );
diff --git a/docs/src/pages/components/container/SimpleContainer.tsx b/docs/src/pages/components/container/SimpleContainer.tsx
index 3c7f0d8af79ff4..a6aedaf6383cbc 100644
--- a/docs/src/pages/components/container/SimpleContainer.tsx
+++ b/docs/src/pages/components/container/SimpleContainer.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
 
 export default function SimpleContainer() {
@@ -8,13 +8,7 @@ export default function SimpleContainer() {
     <React.Fragment>
       <CssBaseline />
       <Container maxWidth="sm">
-        <Typography
-          component="div"
-          style={{
-            backgroundColor: '#cfe8fc',
-            height: '100vh',
-          }}
-        />
+        <Box sx={{ bgcolor: '#cfe8fc', height: '100vh' }} />
       </Container>
     </React.Fragment>
   );