diff --git a/docs/src/pages/getting-started/templates/blog/Blog.js b/docs/src/pages/getting-started/templates/blog/Blog.js
index 5e92b03897395b..412a9681906df5 100644
--- a/docs/src/pages/getting-started/templates/blog/Blog.js
+++ b/docs/src/pages/getting-started/templates/blog/Blog.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
@@ -16,12 +15,6 @@ import post1 from './blog-post.1.md';
 import post2 from './blog-post.2.md';
 import post3 from './blog-post.3.md';
 
-const useStyles = makeStyles((theme) => ({
-  mainGrid: {
-    marginTop: theme.spacing(3),
-  },
-}));
-
 const sections = [
   { title: 'Technology', url: '#' },
   { title: 'Design', url: '#' },
@@ -90,8 +83,6 @@ const sidebar = {
 };
 
 export default function Blog() {
-  const classes = useStyles();
-
   return (
     <React.Fragment>
       <CssBaseline />
@@ -104,7 +95,7 @@ export default function Blog() {
               <FeaturedPost key={post.title} post={post} />
             ))}
           </Grid>
-          <Grid container spacing={5} className={classes.mainGrid}>
+          <Grid container spacing={5} sx={{ mt: 3 }}>
             <Main title="From the firehose" posts={posts} />
             <Sidebar
               title={sidebar.title}
diff --git a/docs/src/pages/getting-started/templates/blog/Blog.tsx b/docs/src/pages/getting-started/templates/blog/Blog.tsx
index 5e92b03897395b..412a9681906df5 100644
--- a/docs/src/pages/getting-started/templates/blog/Blog.tsx
+++ b/docs/src/pages/getting-started/templates/blog/Blog.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
@@ -16,12 +15,6 @@ import post1 from './blog-post.1.md';
 import post2 from './blog-post.2.md';
 import post3 from './blog-post.3.md';
 
-const useStyles = makeStyles((theme) => ({
-  mainGrid: {
-    marginTop: theme.spacing(3),
-  },
-}));
-
 const sections = [
   { title: 'Technology', url: '#' },
   { title: 'Design', url: '#' },
@@ -90,8 +83,6 @@ const sidebar = {
 };
 
 export default function Blog() {
-  const classes = useStyles();
-
   return (
     <React.Fragment>
       <CssBaseline />
@@ -104,7 +95,7 @@ export default function Blog() {
               <FeaturedPost key={post.title} post={post} />
             ))}
           </Grid>
-          <Grid container spacing={5} className={classes.mainGrid}>
+          <Grid container spacing={5} sx={{ mt: 3 }}>
             <Main title="From the firehose" posts={posts} />
             <Sidebar
               title={sidebar.title}
diff --git a/docs/src/pages/getting-started/templates/blog/Footer.js b/docs/src/pages/getting-started/templates/blog/Footer.js
index 04699a3af4d0b4..5f4114d3576f38 100644
--- a/docs/src/pages/getting-started/templates/blog/Footer.js
+++ b/docs/src/pages/getting-started/templates/blog/Footer.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
@@ -18,20 +18,11 @@ function Copyright() {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  footer: {
-    backgroundColor: theme.palette.background.paper,
-    // marginTop: theme.spacing(8),
-    padding: theme.spacing(6, 0),
-  },
-}));
-
 function Footer(props) {
-  const classes = useStyles();
   const { description, title } = props;
 
   return (
-    <footer className={classes.footer}>
+    <Box component="footer" sx={{ bgcolor: 'background.paper', py: 6 }}>
       <Container maxWidth="lg">
         <Typography variant="h6" align="center" gutterBottom>
           {title}
@@ -46,7 +37,7 @@ function Footer(props) {
         </Typography>
         <Copyright />
       </Container>
-    </footer>
+    </Box>
   );
 }
 
diff --git a/docs/src/pages/getting-started/templates/blog/Footer.tsx b/docs/src/pages/getting-started/templates/blog/Footer.tsx
index e70ee11e6ed123..279511aade1ed7 100644
--- a/docs/src/pages/getting-started/templates/blog/Footer.tsx
+++ b/docs/src/pages/getting-started/templates/blog/Footer.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
@@ -17,25 +17,16 @@ function Copyright() {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  footer: {
-    backgroundColor: theme.palette.background.paper,
-    // marginTop: theme.spacing(8),
-    padding: theme.spacing(6, 0),
-  },
-}));
-
 interface FooterProps {
   description: string;
   title: string;
 }
 
 export default function Footer(props: FooterProps) {
-  const classes = useStyles();
   const { description, title } = props;
 
   return (
-    <footer className={classes.footer}>
+    <Box component="footer" sx={{ bgcolor: 'background.paper', py: 6 }}>
       <Container maxWidth="lg">
         <Typography variant="h6" align="center" gutterBottom>
           {title}
@@ -50,6 +41,6 @@ export default function Footer(props: FooterProps) {
         </Typography>
         <Copyright />
       </Container>
-    </footer>
+    </Box>
   );
 }
diff --git a/docs/src/pages/getting-started/templates/blog/Header.js b/docs/src/pages/getting-started/templates/blog/Header.js
index 1effde1c20233f..e10c570a5e5b84 100644
--- a/docs/src/pages/getting-started/templates/blog/Header.js
+++ b/docs/src/pages/getting-started/templates/blog/Header.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
 import Toolbar from '@material-ui/core/Toolbar';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
@@ -8,30 +7,12 @@ import SearchIcon from '@material-ui/icons/Search';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 
-const useStyles = makeStyles((theme) => ({
-  toolbar: {
-    borderBottom: `1px solid ${theme.palette.divider}`,
-  },
-  toolbarTitle: {
-    flex: 1,
-  },
-  toolbarSecondary: {
-    justifyContent: 'space-between',
-    overflowX: 'auto',
-  },
-  toolbarLink: {
-    padding: theme.spacing(1),
-    flexShrink: 0,
-  },
-}));
-
 function Header(props) {
-  const classes = useStyles();
   const { sections, title } = props;
 
   return (
     <React.Fragment>
-      <Toolbar className={classes.toolbar}>
+      <Toolbar sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Button size="small">Subscribe</Button>
         <Typography
           component="h2"
@@ -39,7 +20,7 @@ function Header(props) {
           color="inherit"
           align="center"
           noWrap
-          className={classes.toolbarTitle}
+          sx={{ flex: 1 }}
         >
           {title}
         </Typography>
@@ -50,7 +31,11 @@ function Header(props) {
           Sign up
         </Button>
       </Toolbar>
-      <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
+      <Toolbar
+        component="nav"
+        variant="dense"
+        sx={{ justifyContent: 'space-between', overflowX: 'auto' }}
+      >
         {sections.map((section) => (
           <Link
             color="inherit"
@@ -58,7 +43,7 @@ function Header(props) {
             key={section.title}
             variant="body2"
             href={section.url}
-            className={classes.toolbarLink}
+            sx={{ p: 1, flexShrink: 0 }}
           >
             {section.title}
           </Link>
diff --git a/docs/src/pages/getting-started/templates/blog/Header.tsx b/docs/src/pages/getting-started/templates/blog/Header.tsx
index 05bf6f737b3309..8f3333dd56de83 100644
--- a/docs/src/pages/getting-started/templates/blog/Header.tsx
+++ b/docs/src/pages/getting-started/templates/blog/Header.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Toolbar from '@material-ui/core/Toolbar';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
@@ -7,23 +6,6 @@ import SearchIcon from '@material-ui/icons/Search';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 
-const useStyles = makeStyles((theme) => ({
-  toolbar: {
-    borderBottom: `1px solid ${theme.palette.divider}`,
-  },
-  toolbarTitle: {
-    flex: 1,
-  },
-  toolbarSecondary: {
-    justifyContent: 'space-between',
-    overflowX: 'auto',
-  },
-  toolbarLink: {
-    padding: theme.spacing(1),
-    flexShrink: 0,
-  },
-}));
-
 interface HeaderProps {
   sections: ReadonlyArray<{
     title: string;
@@ -33,12 +15,11 @@ interface HeaderProps {
 }
 
 export default function Header(props: HeaderProps) {
-  const classes = useStyles();
   const { sections, title } = props;
 
   return (
     <React.Fragment>
-      <Toolbar className={classes.toolbar}>
+      <Toolbar sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Button size="small">Subscribe</Button>
         <Typography
           component="h2"
@@ -46,7 +27,7 @@ export default function Header(props: HeaderProps) {
           color="inherit"
           align="center"
           noWrap
-          className={classes.toolbarTitle}
+          sx={{ flex: 1 }}
         >
           {title}
         </Typography>
@@ -57,7 +38,11 @@ export default function Header(props: HeaderProps) {
           Sign up
         </Button>
       </Toolbar>
-      <Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
+      <Toolbar
+        component="nav"
+        variant="dense"
+        sx={{ justifyContent: 'space-between', overflowX: 'auto' }}
+      >
         {sections.map((section) => (
           <Link
             color="inherit"
@@ -65,7 +50,7 @@ export default function Header(props: HeaderProps) {
             key={section.title}
             variant="body2"
             href={section.url}
-            className={classes.toolbarLink}
+            sx={{ p: 1, flexShrink: 0 }}
           >
             {section.title}
           </Link>
diff --git a/docs/src/pages/getting-started/templates/blog/Sidebar.js b/docs/src/pages/getting-started/templates/blog/Sidebar.js
index 77e08e02c8bd86..42dececcb24c95 100644
--- a/docs/src/pages/getting-started/templates/blog/Sidebar.js
+++ b/docs/src/pages/getting-started/templates/blog/Sidebar.js
@@ -1,34 +1,23 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
+import Stack from '@material-ui/core/Stack';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 
-const useStyles = makeStyles((theme) => ({
-  sidebarAboutBox: {
-    padding: theme.spacing(2),
-    backgroundColor: theme.palette.grey[200],
-  },
-  sidebarSection: {
-    marginTop: theme.spacing(3),
-  },
-}));
-
 function Sidebar(props) {
-  const classes = useStyles();
   const { archives, description, social, title } = props;
 
   return (
     <Grid item xs={12} md={4}>
-      <Paper elevation={0} className={classes.sidebarAboutBox}>
+      <Paper elevation={0} sx={{ p: 2, bgcolor: 'grey.200' }}>
         <Typography variant="h6" gutterBottom>
           {title}
         </Typography>
         <Typography>{description}</Typography>
       </Paper>
-      <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
+      <Typography variant="h6" gutterBottom sx={{ mt: 3 }}>
         Archives
       </Typography>
       {archives.map((archive) => (
@@ -37,17 +26,21 @@ function Sidebar(props) {
         </Link>
       ))}
 
-      <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
+      <Typography variant="h6" gutterBottom sx={{ mt: 3 }}>
         Social
       </Typography>
       {social.map((network) => (
-        <Link display="block" variant="body1" href="#" key={network.name}>
-          <Grid container direction="row" spacing={1} alignItems="center">
-            <Grid item>
-              <network.icon />
-            </Grid>
-            <Grid item>{network.name}</Grid>
-          </Grid>
+        <Link
+          display="block"
+          variant="body1"
+          href="#"
+          key={network.name}
+          sx={{ mb: 0.5 }}
+        >
+          <Stack direction="row" spacing={1} alignItems="center">
+            <network.icon />
+            <span>{network.name}</span>
+          </Stack>
         </Link>
       ))}
     </Grid>
diff --git a/docs/src/pages/getting-started/templates/blog/Sidebar.tsx b/docs/src/pages/getting-started/templates/blog/Sidebar.tsx
index 38a4d2581578af..732390f14e739b 100644
--- a/docs/src/pages/getting-started/templates/blog/Sidebar.tsx
+++ b/docs/src/pages/getting-started/templates/blog/Sidebar.tsx
@@ -1,20 +1,10 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
+import Stack from '@material-ui/core/Stack';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 
-const useStyles = makeStyles((theme) => ({
-  sidebarAboutBox: {
-    padding: theme.spacing(2),
-    backgroundColor: theme.palette.grey[200],
-  },
-  sidebarSection: {
-    marginTop: theme.spacing(3),
-  },
-}));
-
 interface SidebarProps {
   archives: ReadonlyArray<{
     url: string;
@@ -29,18 +19,17 @@ interface SidebarProps {
 }
 
 export default function Sidebar(props: SidebarProps) {
-  const classes = useStyles();
   const { archives, description, social, title } = props;
 
   return (
     <Grid item xs={12} md={4}>
-      <Paper elevation={0} className={classes.sidebarAboutBox}>
+      <Paper elevation={0} sx={{ p: 2, bgcolor: 'grey.200' }}>
         <Typography variant="h6" gutterBottom>
           {title}
         </Typography>
         <Typography>{description}</Typography>
       </Paper>
-      <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
+      <Typography variant="h6" gutterBottom sx={{ mt: 3 }}>
         Archives
       </Typography>
       {archives.map((archive) => (
@@ -48,17 +37,21 @@ export default function Sidebar(props: SidebarProps) {
           {archive.title}
         </Link>
       ))}
-      <Typography variant="h6" gutterBottom className={classes.sidebarSection}>
+      <Typography variant="h6" gutterBottom sx={{ mt: 3 }}>
         Social
       </Typography>
       {social.map((network) => (
-        <Link display="block" variant="body1" href="#" key={network.name}>
-          <Grid container direction="row" spacing={1} alignItems="center">
-            <Grid item>
-              <network.icon />
-            </Grid>
-            <Grid item>{network.name}</Grid>
-          </Grid>
+        <Link
+          display="block"
+          variant="body1"
+          href="#"
+          key={network.name}
+          sx={{ mb: 0.5 }}
+        >
+          <Stack direction="row" spacing={1} alignItems="center">
+            <network.icon />
+            <span>{network.name}</span>
+          </Stack>
         </Link>
       ))}
     </Grid>
diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
index 2cb479847accb3..c3d4a345fd8b43 100644
--- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
+++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.js
@@ -27,9 +27,6 @@ function Copyright(props) {
 }
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    height: '100vh',
-  },
   image: {
     backgroundImage: 'url(https://source.unsplash.com/random)',
     backgroundRepeat: 'no-repeat',
@@ -46,7 +43,7 @@ export default function SignInSide() {
   const classes = useStyles();
 
   return (
-    <Grid container component="main" className={classes.root}>
+    <Grid container component="main" sx={{ height: '100%' }}>
       <CssBaseline />
       <Grid item xs={false} sm={4} md={7} className={classes.image} />
       <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
diff --git a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx
index 891f2d379a1445..8a684c5ba0eff4 100644
--- a/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx
+++ b/docs/src/pages/getting-started/templates/sign-in-side/SignInSide.tsx
@@ -27,9 +27,6 @@ function Copyright(props: any) {
 }
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    height: '100vh',
-  },
   image: {
     backgroundImage: 'url(https://source.unsplash.com/random)',
     backgroundRepeat: 'no-repeat',
@@ -46,7 +43,7 @@ export default function SignInSide() {
   const classes = useStyles();
 
   return (
-    <Grid container component="main" className={classes.root}>
+    <Grid container component="main" sx={{ height: '100%' }}>
       <CssBaseline />
       <Grid item xs={false} sm={4} md={7} className={classes.image} />
       <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>