diff --git a/docs/src/pages/components/grid/AutoGrid.js b/docs/src/pages/components/grid/AutoGrid.js
index 849947b73ad43b..1a1e3ce47342a7 100644
--- a/docs/src/pages/components/grid/AutoGrid.js
+++ b/docs/src/pages/components/grid/AutoGrid.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
   },
@@ -13,10 +12,10 @@ const styles = theme => ({
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
-});
+}));
 
-function AutoGrid(props) {
-  const { classes } = props;
+function AutoGrid() {
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
@@ -46,8 +45,4 @@ function AutoGrid(props) {
   );
 }
 
-AutoGrid.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(AutoGrid);
+export default AutoGrid;
diff --git a/docs/src/pages/components/grid/AutoGrid.tsx b/docs/src/pages/components/grid/AutoGrid.tsx
new file mode 100644
index 00000000000000..22324a40de26eb
--- /dev/null
+++ b/docs/src/pages/components/grid/AutoGrid.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    paper: {
+      padding: theme.spacing(2),
+      textAlign: 'center',
+      color: theme.palette.text.secondary,
+    },
+  }),
+);
+
+function AutoGrid() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={3}>
+        <Grid item xs>
+          <Paper className={classes.paper}>xs</Paper>
+        </Grid>
+        <Grid item xs>
+          <Paper className={classes.paper}>xs</Paper>
+        </Grid>
+        <Grid item xs>
+          <Paper className={classes.paper}>xs</Paper>
+        </Grid>
+      </Grid>
+      <Grid container spacing={3}>
+        <Grid item xs>
+          <Paper className={classes.paper}>xs</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>xs=6</Paper>
+        </Grid>
+        <Grid item xs>
+          <Paper className={classes.paper}>xs</Paper>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+export default AutoGrid;
diff --git a/docs/src/pages/components/grid/AutoGridNoWrap.js b/docs/src/pages/components/grid/AutoGridNoWrap.js
index 9010f942a10d60..dcc1a6d48c16a2 100644
--- a/docs/src/pages/components/grid/AutoGridNoWrap.js
+++ b/docs/src/pages/components/grid/AutoGridNoWrap.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Paper from '@material-ui/core/Paper';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
     overflow: 'hidden',
@@ -17,13 +16,13 @@ const styles = theme => ({
     margin: `${theme.spacing(1)}px auto`,
     padding: theme.spacing(2),
   },
-});
+}));
 
 const message = `Truncation should be conditionally applicable on this long line of text
  as this is a much longer line than what the container can support. `;
 
-function AutoGridNoWrap(props) {
-  const { classes } = props;
+function AutoGridNoWrap() {
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
@@ -61,8 +60,4 @@ function AutoGridNoWrap(props) {
   );
 }
 
-AutoGridNoWrap.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(AutoGridNoWrap);
+export default AutoGridNoWrap;
diff --git a/docs/src/pages/components/grid/AutoGridNoWrap.tsx b/docs/src/pages/components/grid/AutoGridNoWrap.tsx
new file mode 100644
index 00000000000000..084c3524fd8442
--- /dev/null
+++ b/docs/src/pages/components/grid/AutoGridNoWrap.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Avatar from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+      overflow: 'hidden',
+      padding: theme.spacing(0, 3),
+    },
+    paper: {
+      maxWidth: 400,
+      margin: `${theme.spacing(1)}px auto`,
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+const message = `Truncation should be conditionally applicable on this long line of text
+ as this is a much longer line than what the container can support. `;
+
+function AutoGridNoWrap() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Paper className={classes.paper}>
+        <Grid container wrap="nowrap" spacing={2}>
+          <Grid item>
+            <Avatar>W</Avatar>
+          </Grid>
+          <Grid item xs zeroMinWidth>
+            <Typography noWrap>{message}</Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+      <Paper className={classes.paper}>
+        <Grid container wrap="nowrap" spacing={2}>
+          <Grid item>
+            <Avatar>W</Avatar>
+          </Grid>
+          <Grid item xs>
+            <Typography noWrap>{message}</Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+      <Paper className={classes.paper}>
+        <Grid container wrap="nowrap" spacing={2}>
+          <Grid item>
+            <Avatar>W</Avatar>
+          </Grid>
+          <Grid item xs>
+            <Typography>{message}</Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+    </div>
+  );
+}
+
+export default AutoGridNoWrap;
diff --git a/docs/src/pages/components/grid/CSSGrid.js b/docs/src/pages/components/grid/CSSGrid.js
index efbf3b672dd3e9..bd3eb355be0321 100644
--- a/docs/src/pages/components/grid/CSSGrid.js
+++ b/docs/src/pages/components/grid/CSSGrid.js
@@ -1,16 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
 import Divider from '@material-ui/core/Divider';
 import Grid from '@material-ui/core/Grid';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   container: {
     display: 'grid',
     gridTemplateColumns: 'repeat(12, 1fr)',
-    gridGap: `${theme.spacing(3)}px`,
+    gridGap: theme.spacing(3),
   },
   paper: {
     padding: theme.spacing(1),
@@ -22,10 +21,10 @@ const styles = theme => ({
   divider: {
     margin: theme.spacing(2, 0),
   },
-});
+}));
 
-function CSSGrid(props) {
-  const { classes } = props;
+function CSSGrid() {
+  const classes = useStyles();
 
   return (
     <div>
@@ -80,8 +79,4 @@ function CSSGrid(props) {
   );
 }
 
-CSSGrid.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CSSGrid);
+export default CSSGrid;
diff --git a/docs/src/pages/components/grid/CSSGrid.tsx b/docs/src/pages/components/grid/CSSGrid.tsx
new file mode 100644
index 00000000000000..ba5353677dfae5
--- /dev/null
+++ b/docs/src/pages/components/grid/CSSGrid.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import Divider from '@material-ui/core/Divider';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    container: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(12, 1fr)',
+      gridGap: theme.spacing(3),
+    },
+    paper: {
+      padding: theme.spacing(1),
+      textAlign: 'center',
+      color: theme.palette.text.secondary,
+      whiteSpace: 'nowrap',
+      marginBottom: theme.spacing(1),
+    },
+    divider: {
+      margin: theme.spacing(2, 0),
+    },
+  }),
+);
+
+function CSSGrid() {
+  const classes = useStyles();
+
+  return (
+    <div>
+      <Typography variant="subtitle1" gutterBottom>
+        Material-UI Grid:
+      </Typography>
+      <Grid container spacing={3}>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={8}>
+          <Paper className={classes.paper}>xs=8</Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>xs=4</Paper>
+        </Grid>
+      </Grid>
+      <Divider className={classes.divider} />
+      <Typography variant="subtitle1" gutterBottom>
+        CSS Grid Layout:
+      </Typography>
+      <div className={classes.container}>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 3' }}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 8' }}>
+          <Paper className={classes.paper}>xs=8</Paper>
+        </div>
+        <div style={{ gridColumnEnd: 'span 4' }}>
+          <Paper className={classes.paper}>xs=4</Paper>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CSSGrid;
diff --git a/docs/src/pages/components/grid/CenteredGrid.js b/docs/src/pages/components/grid/CenteredGrid.js
index a5cf198acc0e57..bfd11a47a4fc71 100644
--- a/docs/src/pages/components/grid/CenteredGrid.js
+++ b/docs/src/pages/components/grid/CenteredGrid.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
   },
@@ -13,10 +12,10 @@ const styles = theme => ({
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
-});
+}));
 
-function CenteredGrid(props) {
-  const { classes } = props;
+function CenteredGrid() {
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
@@ -47,8 +46,4 @@ function CenteredGrid(props) {
   );
 }
 
-CenteredGrid.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CenteredGrid);
+export default CenteredGrid;
diff --git a/docs/src/pages/components/grid/CenteredGrid.tsx b/docs/src/pages/components/grid/CenteredGrid.tsx
new file mode 100644
index 00000000000000..25b3e77204b4f4
--- /dev/null
+++ b/docs/src/pages/components/grid/CenteredGrid.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    paper: {
+      padding: theme.spacing(2),
+      textAlign: 'center',
+      color: theme.palette.text.secondary,
+    },
+  }),
+);
+
+function CenteredGrid() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Paper className={classes.paper}>xs=12</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>xs=6</Paper>
+        </Grid>
+        <Grid item xs={6}>
+          <Paper className={classes.paper}>xs=6</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+        <Grid item xs={3}>
+          <Paper className={classes.paper}>xs=3</Paper>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+export default CenteredGrid;
diff --git a/docs/src/pages/components/grid/ComplexGrid.js b/docs/src/pages/components/grid/ComplexGrid.js
index 3df1564aeec3b5..00821579c6919a 100644
--- a/docs/src/pages/components/grid/ComplexGrid.js
+++ b/docs/src/pages/components/grid/ComplexGrid.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import ButtonBase from '@material-ui/core/ButtonBase';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
   },
@@ -25,10 +24,11 @@ const styles = theme => ({
     maxWidth: '100%',
     maxHeight: '100%',
   },
-});
+}));
+
+function ComplexGrid() {
+  const classes = useStyles();
 
-function ComplexGrid(props) {
-  const { classes } = props;
   return (
     <div className={classes.root}>
       <Paper className={classes.paper}>
@@ -67,8 +67,4 @@ function ComplexGrid(props) {
   );
 }
 
-ComplexGrid.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(ComplexGrid);
+export default ComplexGrid;
diff --git a/docs/src/pages/components/grid/ComplexGrid.tsx b/docs/src/pages/components/grid/ComplexGrid.tsx
new file mode 100644
index 00000000000000..5c8b64eb06f93a
--- /dev/null
+++ b/docs/src/pages/components/grid/ComplexGrid.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import ButtonBase from '@material-ui/core/ButtonBase';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    paper: {
+      padding: theme.spacing(2),
+      margin: 'auto',
+      maxWidth: 500,
+    },
+    image: {
+      width: 128,
+      height: 128,
+    },
+    img: {
+      margin: 'auto',
+      display: 'block',
+      maxWidth: '100%',
+      maxHeight: '100%',
+    },
+  }),
+);
+
+function ComplexGrid() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Paper className={classes.paper}>
+        <Grid container spacing={2}>
+          <Grid item>
+            <ButtonBase className={classes.image}>
+              <img className={classes.img} alt="complex" src="/static/images/grid/complex.jpg" />
+            </ButtonBase>
+          </Grid>
+          <Grid item xs={12} sm container>
+            <Grid item xs container direction="column" spacing={2}>
+              <Grid item xs>
+                <Typography gutterBottom variant="subtitle1">
+                  Standard license
+                </Typography>
+                <Typography variant="body2" gutterBottom>
+                  Full resolution 1920x1080 • JPEG
+                </Typography>
+                <Typography variant="body2" color="textSecondary">
+                  ID: 1030114
+                </Typography>
+              </Grid>
+              <Grid item>
+                <Typography variant="body2" style={{ cursor: 'pointer' }}>
+                  Remove
+                </Typography>
+              </Grid>
+            </Grid>
+            <Grid item>
+              <Typography variant="subtitle1">$19.00</Typography>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Paper>
+    </div>
+  );
+}
+
+export default ComplexGrid;
diff --git a/docs/src/pages/components/grid/FullWidthGrid.js b/docs/src/pages/components/grid/FullWidthGrid.js
index 5664d56404d6b8..feb92a87e0316b 100644
--- a/docs/src/pages/components/grid/FullWidthGrid.js
+++ b/docs/src/pages/components/grid/FullWidthGrid.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
   },
@@ -13,10 +12,10 @@ const styles = theme => ({
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
-});
+}));
 
-function FullWidthGrid(props) {
-  const { classes } = props;
+function FullWidthGrid() {
+  const classes = useStyles();
 
   return (
     <div className={classes.root}>
@@ -47,8 +46,4 @@ function FullWidthGrid(props) {
   );
 }
 
-FullWidthGrid.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(FullWidthGrid);
+export default FullWidthGrid;
diff --git a/docs/src/pages/components/grid/FullWidthGrid.tsx b/docs/src/pages/components/grid/FullWidthGrid.tsx
new file mode 100644
index 00000000000000..cec133592850ed
--- /dev/null
+++ b/docs/src/pages/components/grid/FullWidthGrid.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    paper: {
+      padding: theme.spacing(2),
+      textAlign: 'center',
+      color: theme.palette.text.secondary,
+    },
+  }),
+);
+
+function FullWidthGrid() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Paper className={classes.paper}>xs=12</Paper>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Paper className={classes.paper}>xs=12 sm=6</Paper>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Paper className={classes.paper}>xs=12 sm=6</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+        <Grid item xs={6} sm={3}>
+          <Paper className={classes.paper}>xs=6 sm=3</Paper>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+export default FullWidthGrid;
diff --git a/docs/src/pages/components/grid/InteractiveGrid.js b/docs/src/pages/components/grid/InteractiveGrid.js
index 1bc27d01aac017..cf70ffe54d8b6a 100644
--- a/docs/src/pages/components/grid/InteractiveGrid.js
+++ b/docs/src/pages/components/grid/InteractiveGrid.js
@@ -1,7 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import Grid from '@material-ui/core/Grid';
 import FormControl from '@material-ui/core/FormControl';
 import FormLabel from '@material-ui/core/FormLabel';
@@ -9,8 +6,13 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import Radio from '@material-ui/core/Radio';
 import Paper from '@material-ui/core/Paper';
+import { makeStyles } from '@material-ui/core/styles';
+// We don't have a typescript version of MarkdownElement
+// tslint:disable-next-line: ban-ts-ignore
+// @ts-ignore
+import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
   },
@@ -25,26 +27,15 @@ const styles = theme => ({
   control: {
     padding: theme.spacing(2),
   },
-});
-
-class InteractiveGrid extends React.Component {
-  state = {
-    direction: 'row',
-    justify: 'center',
-    alignItems: 'center',
-  };
+}));
 
-  handleChange = key => (event, value) => {
-    this.setState({
-      [key]: value,
-    });
-  };
+function InteractiveGrid() {
+  const classes = useStyles();
+  const [direction, setDirection] = React.useState('row');
+  const [justify, setJustify] = React.useState('center');
+  const [alignItems, setAlignItems] = React.useState('center');
 
-  render() {
-    const { classes } = this.props;
-    const { alignItems, direction, justify } = this.state;
-
-    const code = `
+  const code = `
 \`\`\`jsx
 <Grid
   container
@@ -55,115 +46,102 @@ class InteractiveGrid extends React.Component {
 \`\`\`
 `;
 
-    return (
-      <Grid container className={classes.root}>
-        <Grid item xs={12}>
-          <Grid
-            container
-            spacing={2}
-            className={classes.demo}
-            alignItems={alignItems}
-            direction={direction}
-            justify={justify}
-          >
-            {[0, 1, 2].map(value => (
-              <Grid key={value} item>
-                <Paper
-                  className={classes.paper}
-                  style={{ paddingTop: (value + 1) * 10, paddingBottom: (value + 1) * 10 }}
-                >
-                  {`Cell ${value + 1}`}
-                </Paper>
-              </Grid>
-            ))}
-          </Grid>
-        </Grid>
-        <Grid item xs={12}>
-          <Paper className={classes.control}>
-            <Grid container spacing={3}>
-              <Grid item xs={12}>
-                <FormControl component="fieldset">
-                  <FormLabel>direction</FormLabel>
-                  <RadioGroup
-                    row
-                    name="direction"
-                    aria-label="Direction"
-                    value={direction}
-                    onChange={this.handleChange('direction')}
-                  >
-                    <FormControlLabel value="row" control={<Radio />} label="row" />
-                    <FormControlLabel value="row-reverse" control={<Radio />} label="row-reverse" />
-                    <FormControlLabel value="column" control={<Radio />} label="column" />
-                    <FormControlLabel
-                      value="column-reverse"
-                      control={<Radio />}
-                      label="column-reverse"
-                    />
-                  </RadioGroup>
-                </FormControl>
-              </Grid>
-              <Grid item xs={12}>
-                <FormControl component="fieldset">
-                  <FormLabel>justify</FormLabel>
-                  <RadioGroup
-                    row
-                    name="justify"
-                    aria-label="Justify"
-                    value={justify}
-                    onChange={this.handleChange('justify')}
-                  >
-                    <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
-                    <FormControlLabel value="center" control={<Radio />} label="center" />
-                    <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
-                    <FormControlLabel
-                      value="space-between"
-                      control={<Radio />}
-                      label="space-between"
-                    />
-                    <FormControlLabel
-                      value="space-around"
-                      control={<Radio />}
-                      label="space-around"
-                    />
-                    <FormControlLabel
-                      value="space-evenly"
-                      control={<Radio />}
-                      label="space-evenly"
-                    />
-                  </RadioGroup>
-                </FormControl>
-              </Grid>
-              <Grid item xs={12}>
-                <FormControl component="fieldset">
-                  <FormLabel>alignItems</FormLabel>
-                  <RadioGroup
-                    row
-                    name="alignItems"
-                    aria-label="Align items"
-                    value={alignItems}
-                    onChange={this.handleChange('alignItems')}
-                  >
-                    <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
-                    <FormControlLabel value="center" control={<Radio />} label="center" />
-                    <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
-                    <FormControlLabel value="stretch" control={<Radio />} label="stretch" />
-                    <FormControlLabel value="baseline" control={<Radio />} label="baseline" />
-                  </RadioGroup>
-                </FormControl>
-              </Grid>
+  return (
+    <Grid container className={classes.root}>
+      <Grid item xs={12}>
+        <Grid
+          container
+          spacing={2}
+          className={classes.demo}
+          alignItems={alignItems}
+          direction={direction}
+          justify={justify}
+        >
+          {[0, 1, 2].map(value => (
+            <Grid key={value} item>
+              <Paper
+                className={classes.paper}
+                style={{ paddingTop: (value + 1) * 10, paddingBottom: (value + 1) * 10 }}
+              >
+                {`Cell ${value + 1}`}
+              </Paper>
             </Grid>
-          </Paper>
-        </Grid>
-        <Grid item xs={12}>
-          <MarkdownElement text={code} />
+          ))}
         </Grid>
       </Grid>
-    );
-  }
+      <Grid item xs={12}>
+        <Paper className={classes.control}>
+          <Grid container spacing={3}>
+            <Grid item xs={12}>
+              <FormControl component="fieldset">
+                <FormLabel>direction</FormLabel>
+                <RadioGroup
+                  row
+                  name="direction"
+                  aria-label="Direction"
+                  value={direction}
+                  onChange={(e, value) => setDirection(value)}
+                >
+                  <FormControlLabel value="row" control={<Radio />} label="row" />
+                  <FormControlLabel value="row-reverse" control={<Radio />} label="row-reverse" />
+                  <FormControlLabel value="column" control={<Radio />} label="column" />
+                  <FormControlLabel
+                    value="column-reverse"
+                    control={<Radio />}
+                    label="column-reverse"
+                  />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+            <Grid item xs={12}>
+              <FormControl component="fieldset">
+                <FormLabel>justify</FormLabel>
+                <RadioGroup
+                  row
+                  name="justify"
+                  aria-label="Justify"
+                  value={justify}
+                  onChange={(e, value) => setJustify(value)}
+                >
+                  <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
+                  <FormControlLabel value="center" control={<Radio />} label="center" />
+                  <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
+                  <FormControlLabel
+                    value="space-between"
+                    control={<Radio />}
+                    label="space-between"
+                  />
+                  <FormControlLabel value="space-around" control={<Radio />} label="space-around" />
+                  <FormControlLabel value="space-evenly" control={<Radio />} label="space-evenly" />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+            <Grid item xs={12}>
+              <FormControl component="fieldset">
+                <FormLabel>alignItems</FormLabel>
+                <RadioGroup
+                  row
+                  name="alignItems"
+                  aria-label="Align items"
+                  value={alignItems}
+                  onChange={(e, value) => setAlignItems(value)}
+                >
+                  <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
+                  <FormControlLabel value="center" control={<Radio />} label="center" />
+                  <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
+                  <FormControlLabel value="stretch" control={<Radio />} label="stretch" />
+                  <FormControlLabel value="baseline" control={<Radio />} label="baseline" />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Grid>
+      <Grid item xs={12}>
+        <MarkdownElement text={code} />
+      </Grid>
+    </Grid>
+  );
 }
 
-InteractiveGrid.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(InteractiveGrid);
+export default InteractiveGrid;
diff --git a/docs/src/pages/components/grid/InteractiveGrid.tsx b/docs/src/pages/components/grid/InteractiveGrid.tsx
new file mode 100644
index 00000000000000..f9e4fe338aa4ed
--- /dev/null
+++ b/docs/src/pages/components/grid/InteractiveGrid.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import Grid, { GridItemsAlignment, GridJustification, GridDirection } from '@material-ui/core/Grid';
+import FormControl from '@material-ui/core/FormControl';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import Paper from '@material-ui/core/Paper';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+// We don't have a typescript version of MarkdownElement
+// tslint:disable-next-line: ban-ts-ignore
+// @ts-ignore
+import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    demo: {
+      height: 240,
+    },
+    paper: {
+      padding: theme.spacing(2),
+      height: '100%',
+      color: theme.palette.text.secondary,
+    },
+    control: {
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+function InteractiveGrid() {
+  const classes = useStyles();
+  const [direction, setDirection] = React.useState<GridDirection>('row');
+  const [justify, setJustify] = React.useState<GridJustification>('center');
+  const [alignItems, setAlignItems] = React.useState<GridItemsAlignment>('center');
+
+  const code = `
+\`\`\`jsx
+<Grid
+  container
+  direction="${direction}"
+  justify="${justify}"
+  alignItems="${alignItems}"
+>
+\`\`\`
+`;
+
+  return (
+    <Grid container className={classes.root}>
+      <Grid item xs={12}>
+        <Grid
+          container
+          spacing={2}
+          className={classes.demo}
+          alignItems={alignItems}
+          direction={direction}
+          justify={justify}
+        >
+          {[0, 1, 2].map(value => (
+            <Grid key={value} item>
+              <Paper
+                className={classes.paper}
+                style={{ paddingTop: (value + 1) * 10, paddingBottom: (value + 1) * 10 }}
+              >
+                {`Cell ${value + 1}`}
+              </Paper>
+            </Grid>
+          ))}
+        </Grid>
+      </Grid>
+      <Grid item xs={12}>
+        <Paper className={classes.control}>
+          <Grid container spacing={3}>
+            <Grid item xs={12}>
+              <FormControl component="fieldset">
+                <FormLabel>direction</FormLabel>
+                <RadioGroup
+                  row
+                  name="direction"
+                  aria-label="Direction"
+                  value={direction}
+                  onChange={(e, value) => setDirection(value as GridDirection)}
+                >
+                  <FormControlLabel value="row" control={<Radio />} label="row" />
+                  <FormControlLabel value="row-reverse" control={<Radio />} label="row-reverse" />
+                  <FormControlLabel value="column" control={<Radio />} label="column" />
+                  <FormControlLabel
+                    value="column-reverse"
+                    control={<Radio />}
+                    label="column-reverse"
+                  />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+            <Grid item xs={12}>
+              <FormControl component="fieldset">
+                <FormLabel>justify</FormLabel>
+                <RadioGroup
+                  row
+                  name="justify"
+                  aria-label="Justify"
+                  value={justify}
+                  onChange={(e, value) => setJustify(value as GridJustification)}
+                >
+                  <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
+                  <FormControlLabel value="center" control={<Radio />} label="center" />
+                  <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
+                  <FormControlLabel
+                    value="space-between"
+                    control={<Radio />}
+                    label="space-between"
+                  />
+                  <FormControlLabel value="space-around" control={<Radio />} label="space-around" />
+                  <FormControlLabel value="space-evenly" control={<Radio />} label="space-evenly" />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+            <Grid item xs={12}>
+              <FormControl component="fieldset">
+                <FormLabel>alignItems</FormLabel>
+                <RadioGroup
+                  row
+                  name="alignItems"
+                  aria-label="Align items"
+                  value={alignItems}
+                  onChange={(e, value) => setAlignItems(value as GridItemsAlignment)}
+                >
+                  <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />
+                  <FormControlLabel value="center" control={<Radio />} label="center" />
+                  <FormControlLabel value="flex-end" control={<Radio />} label="flex-end" />
+                  <FormControlLabel value="stretch" control={<Radio />} label="stretch" />
+                  <FormControlLabel value="baseline" control={<Radio />} label="baseline" />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Grid>
+      <Grid item xs={12}>
+        <MarkdownElement text={code} />
+      </Grid>
+    </Grid>
+  );
+}
+
+export default InteractiveGrid;
diff --git a/docs/src/pages/components/grid/NestedGrid.js b/docs/src/pages/components/grid/NestedGrid.js
index 08b0747cec2e83..07a316efe546ea 100644
--- a/docs/src/pages/components/grid/NestedGrid.js
+++ b/docs/src/pages/components/grid/NestedGrid.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
   },
@@ -13,52 +12,42 @@ const styles = theme => ({
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
-});
+}));
 
-function FormRow(props) {
-  const { classes } = props;
+function NestedGrid() {
+  const classes = useStyles();
 
-  return (
-    <React.Fragment>
-      <Grid item xs={4}>
-        <Paper className={classes.paper}>item</Paper>
-      </Grid>
-      <Grid item xs={4}>
-        <Paper className={classes.paper}>item</Paper>
-      </Grid>
-      <Grid item xs={4}>
-        <Paper className={classes.paper}>item</Paper>
-      </Grid>
-    </React.Fragment>
-  );
-}
-
-FormRow.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-function NestedGrid(props) {
-  const { classes } = props;
+  function FormRow() {
+    return (
+      <React.Fragment>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>item</Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>item</Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>item</Paper>
+        </Grid>
+      </React.Fragment>
+    );
+  }
 
   return (
     <div className={classes.root}>
       <Grid container spacing={1}>
         <Grid container item xs={12} spacing={3}>
-          <FormRow classes={classes} />
+          <FormRow />
         </Grid>
         <Grid container item xs={12} spacing={3}>
-          <FormRow classes={classes} />
+          <FormRow />
         </Grid>
         <Grid container item xs={12} spacing={3}>
-          <FormRow classes={classes} />
+          <FormRow />
         </Grid>
       </Grid>
     </div>
   );
 }
 
-NestedGrid.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(NestedGrid);
+export default NestedGrid;
diff --git a/docs/src/pages/components/grid/NestedGrid.tsx b/docs/src/pages/components/grid/NestedGrid.tsx
new file mode 100644
index 00000000000000..674bc984207afb
--- /dev/null
+++ b/docs/src/pages/components/grid/NestedGrid.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    paper: {
+      padding: theme.spacing(1),
+      textAlign: 'center',
+      color: theme.palette.text.secondary,
+    },
+  }),
+);
+
+function NestedGrid() {
+  const classes = useStyles();
+
+  function FormRow() {
+    return (
+      <React.Fragment>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>item</Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>item</Paper>
+        </Grid>
+        <Grid item xs={4}>
+          <Paper className={classes.paper}>item</Paper>
+        </Grid>
+      </React.Fragment>
+    );
+  }
+
+  return (
+    <div className={classes.root}>
+      <Grid container spacing={1}>
+        <Grid container item xs={12} spacing={3}>
+          <FormRow />
+        </Grid>
+        <Grid container item xs={12} spacing={3}>
+          <FormRow />
+        </Grid>
+        <Grid container item xs={12} spacing={3}>
+          <FormRow />
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+export default NestedGrid;
diff --git a/docs/src/pages/components/grid/SpacingGrid.js b/docs/src/pages/components/grid/SpacingGrid.js
index 3c419995e4e1c6..c2842de1f6b917 100644
--- a/docs/src/pages/components/grid/SpacingGrid.js
+++ b/docs/src/pages/components/grid/SpacingGrid.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import FormLabel from '@material-ui/core/FormLabel';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -8,7 +7,7 @@ import RadioGroup from '@material-ui/core/RadioGroup';
 import Radio from '@material-ui/core/Radio';
 import Paper from '@material-ui/core/Paper';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     flexGrow: 1,
   },
@@ -19,69 +18,54 @@ const styles = theme => ({
   control: {
     padding: theme.spacing(2),
   },
-});
+}));
 
-class GuttersGrid extends React.Component {
-  state = {
-    spacing: '2',
-  };
+function SpacingGrid() {
+  const [spacing, setSpacing] = React.useState(2);
+  const classes = useStyles();
 
-  handleChange = key => (event, value) => {
-    this.setState({
-      [key]: value,
-    });
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { spacing } = this.state;
+  function handleChange(event, value) {
+    setSpacing(Number(value));
+  }
 
-    return (
-      <Grid container className={classes.root} spacing={2}>
-        <Grid item xs={12}>
-          <Grid container className={classes.demo} justify="center" spacing={Number(spacing)}>
-            {[0, 1, 2].map(value => (
-              <Grid key={value} item>
-                <Paper className={classes.paper} />
-              </Grid>
-            ))}
-          </Grid>
-        </Grid>
-        <Grid item xs={12}>
-          <Paper className={classes.control}>
-            <Grid container>
-              <Grid item>
-                <FormLabel>spacing</FormLabel>
-                <RadioGroup
-                  name="spacing"
-                  aria-label="Spacing"
-                  value={spacing}
-                  onChange={this.handleChange('spacing')}
-                  row
-                >
-                  <FormControlLabel value="0" control={<Radio />} label="0" />
-                  <FormControlLabel value="1" control={<Radio />} label="1" />
-                  <FormControlLabel value="2" control={<Radio />} label="2" />
-                  <FormControlLabel value="3" control={<Radio />} label="3" />
-                  <FormControlLabel value="4" control={<Radio />} label="4" />
-                  <FormControlLabel value="5" control={<Radio />} label="5" />
-                  <FormControlLabel value="6" control={<Radio />} label="6" />
-                  <FormControlLabel value="7" control={<Radio />} label="7" />
-                  <FormControlLabel value="8" control={<Radio />} label="8" />
-                  <FormControlLabel value="9" control={<Radio />} label="9" />
-                  <FormControlLabel value="10" control={<Radio />} label="10" />
-                </RadioGroup>
-              </Grid>
+  return (
+    <Grid container className={classes.root} spacing={2}>
+      <Grid item xs={12}>
+        <Grid container justify="center" spacing={spacing}>
+          {[0, 1, 2].map(value => (
+            <Grid key={value} item>
+              <Paper className={classes.paper} />
             </Grid>
-          </Paper>
+          ))}
         </Grid>
       </Grid>
-    );
-  }
+      <Grid item xs={12}>
+        <Paper className={classes.control}>
+          <Grid container>
+            <Grid item>
+              <FormLabel>spacing</FormLabel>
+              <RadioGroup
+                name="spacing"
+                aria-label="Spacing"
+                value={spacing.toString()}
+                onChange={handleChange}
+                row
+              >
+                {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => (
+                  <FormControlLabel
+                    key={value}
+                    value={value.toString()}
+                    control={<Radio />}
+                    label={value.toString()}
+                  />
+                ))}
+              </RadioGroup>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Grid>
+    </Grid>
+  );
 }
 
-GuttersGrid.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(GuttersGrid);
+export default SpacingGrid;
diff --git a/docs/src/pages/components/grid/SpacingGrid.tsx b/docs/src/pages/components/grid/SpacingGrid.tsx
new file mode 100644
index 00000000000000..62ad9d8375f7e2
--- /dev/null
+++ b/docs/src/pages/components/grid/SpacingGrid.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Grid, { GridSpacing } from '@material-ui/core/Grid';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Radio from '@material-ui/core/Radio';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    paper: {
+      height: 140,
+      width: 100,
+    },
+    control: {
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+function SpacingGrid() {
+  const [spacing, setSpacing] = React.useState<GridSpacing>(2);
+  const classes = useStyles();
+
+  function handleChange(event: any, value: string) {
+    setSpacing(Number(value) as GridSpacing);
+  }
+
+  return (
+    <Grid container className={classes.root} spacing={2}>
+      <Grid item xs={12}>
+        <Grid container justify="center" spacing={spacing}>
+          {[0, 1, 2].map(value => (
+            <Grid key={value} item>
+              <Paper className={classes.paper} />
+            </Grid>
+          ))}
+        </Grid>
+      </Grid>
+      <Grid item xs={12}>
+        <Paper className={classes.control}>
+          <Grid container>
+            <Grid item>
+              <FormLabel>spacing</FormLabel>
+              <RadioGroup
+                name="spacing"
+                aria-label="Spacing"
+                value={spacing.toString()}
+                onChange={handleChange}
+                row
+              >
+                {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(value => (
+                  <FormControlLabel
+                    key={value}
+                    value={value.toString()}
+                    control={<Radio />}
+                    label={value.toString()}
+                  />
+                ))}
+              </RadioGroup>
+            </Grid>
+          </Grid>
+        </Paper>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default SpacingGrid;