From 306f203acee3656c6178c55a86f0bead65777761 Mon Sep 17 00:00:00 2001
From: Trevor <trevorme91@gmail.com>
Date: Sun, 6 Jan 2019 10:45:44 +0900
Subject: [PATCH 1/4] [Grid] Apply theme.spacing.unit to grid spacing

---
 docs/src/pages/demos/chips/ChipsPlayground.js     |  4 ++--
 .../pages/demos/lists/InteractiveList.hooks.js    |  4 ++--
 docs/src/pages/demos/lists/InteractiveList.js     |  4 ++--
 docs/src/pages/demos/text-fields/InputWithIcon.js |  2 +-
 .../pages/demos/tooltips/PositionedTooltips.js    |  2 +-
 docs/src/pages/discover-more/team/Team.js         |  2 +-
 .../page-layout-examples/PageLayoutExamples.js    |  2 +-
 .../page-layout-examples/album/Album.js           |  4 ++--
 .../page-layout-examples/blog/Blog.js             |  4 ++--
 .../page-layout-examples/checkout/AddressForm.js  |  2 +-
 .../page-layout-examples/checkout/PaymentForm.js  |  2 +-
 .../page-layout-examples/checkout/Review.js       |  2 +-
 .../page-layout-examples/pricing/Pricing.js       |  4 ++--
 docs/src/pages/lab/toggle-button/ToggleButtons.js |  2 +-
 docs/src/pages/layout/grid/AutoGrid.js            |  4 ++--
 docs/src/pages/layout/grid/AutoGridNoWrap.js      |  6 +++---
 docs/src/pages/layout/grid/CSSGrid.js             |  2 +-
 docs/src/pages/layout/grid/CenteredGrid.js        |  2 +-
 docs/src/pages/layout/grid/ComplexGrid.js         |  4 ++--
 docs/src/pages/layout/grid/FullWidthGrid.js       |  2 +-
 docs/src/pages/layout/grid/InteractiveGrid.js     |  4 ++--
 docs/src/pages/layout/grid/NestedGrid.js          |  8 ++++----
 docs/src/pages/layout/grid/SpacingGrid.js         | 15 +++++++++------
 docs/src/pages/layout/grid/grid-zh.md             |  4 ++--
 docs/src/pages/layout/grid/grid.md                |  2 +-
 docs/src/pages/layout/hidden/GridIntegration.js   |  2 +-
 docs/src/pages/premium-themes/PremiumThemes.js    |  2 +-
 .../instapaper/pages/instapaper/Profile.js        |  4 ++--
 docs/src/pages/premium-themes/onepirate/SignUp.js |  2 +-
 .../onepirate/modules/views/AppFooter.js          |  4 ++--
 .../onepirate/modules/views/ProductCTA.js         |  2 +-
 .../onepirate/modules/views/ProductHowItWorks.js  |  2 +-
 .../onepirate/modules/views/ProductValues.js      |  2 +-
 .../src/pages/premium-themes/paperbase/Content.js |  2 +-
 docs/src/pages/premium-themes/paperbase/Header.js |  4 ++--
 .../tweeper/components/tweeper/Header.js          |  2 +-
 .../tweeper/components/tweeper/Tweet.js           |  6 +++---
 .../tweeper/pages/tweeper/Profile.js              |  2 +-
 docs/src/pages/style/color/ColorTool.js           |  2 +-
 docs/src/pages/system/basics/RealWorld.js         |  4 ++--
 docs/src/pages/utils/popover/AnchorPlayground.js  |  4 ++--
 docs/src/pages/utils/popper/PositionedPopper.js   |  2 +-
 docs/src/pages/utils/popper/ScrollPlayground.js   |  2 +-
 packages/material-ui/src/Grid/Grid.d.ts           |  2 +-
 packages/material-ui/src/Grid/Grid.js             | 10 ++++++----
 packages/material-ui/src/Grid/Grid.test.js        |  4 ++--
 pages/api/grid.md                                 | 13 ++++++++-----
 test/regressions/tests/Grid/AutoGrid.js           |  4 ++--
 test/regressions/tests/Grid/SimpleGrid.js         |  2 +-
 test/regressions/tests/Grid/StressGrid.js         | 10 +++++-----
 test/regressions/tests/Table/PaddingTable.js      |  2 +-
 .../tests/Tooltip/PositionedTooltips.js           |  2 +-
 52 files changed, 100 insertions(+), 92 deletions(-)

diff --git a/docs/src/pages/demos/chips/ChipsPlayground.js b/docs/src/pages/demos/chips/ChipsPlayground.js
index 5dc631bb6b222e..f03c0c32270327 100644
--- a/docs/src/pages/demos/chips/ChipsPlayground.js
+++ b/docs/src/pages/demos/chips/ChipsPlayground.js
@@ -115,7 +115,7 @@ class ChipsPlayground extends React.Component {
     return (
       <Grid container className={classes.root}>
         <Grid item xs={12}>
-          <Grid container justify="center" alignItems="center" spacing={40}>
+          <Grid container justify="center" alignItems="center" spacing={5}>
             <Grid item className={classes.chipWrapper}>
               <Chip
                 label="Awesome Chip Component"
@@ -131,7 +131,7 @@ class ChipsPlayground extends React.Component {
         </Grid>
         <Grid item xs={12}>
           <Paper className={classes.control}>
-            <Grid container spacing={24}>
+            <Grid container spacing={3}>
               <Grid item xs={12}>
                 <FormControl component="fieldset">
                   <FormLabel>color</FormLabel>
diff --git a/docs/src/pages/demos/lists/InteractiveList.hooks.js b/docs/src/pages/demos/lists/InteractiveList.hooks.js
index 47045cf88a31b2..310d87036ee034 100644
--- a/docs/src/pages/demos/lists/InteractiveList.hooks.js
+++ b/docs/src/pages/demos/lists/InteractiveList.hooks.js
@@ -66,7 +66,7 @@ function InteractiveList() {
           label="Enable secondary text"
         />
       </FormGroup>
-      <Grid container spacing={16}>
+      <Grid container spacing={2}>
         <Grid item xs={12} md={6}>
           <Typography variant="h6" className={classes.title}>
             Text only
@@ -105,7 +105,7 @@ function InteractiveList() {
           </div>
         </Grid>
       </Grid>
-      <Grid container spacing={16}>
+      <Grid container spacing={2}>
         <Grid item xs={12} md={6}>
           <Typography variant="h6" className={classes.title}>
             Avatar with text
diff --git a/docs/src/pages/demos/lists/InteractiveList.js b/docs/src/pages/demos/lists/InteractiveList.js
index 31189ea4a053a1..e7324b4625248c 100644
--- a/docs/src/pages/demos/lists/InteractiveList.js
+++ b/docs/src/pages/demos/lists/InteractiveList.js
@@ -72,7 +72,7 @@ class InteractiveList extends React.Component {
             label="Enable secondary text"
           />
         </FormGroup>
-        <Grid container spacing={16}>
+        <Grid container spacing={2}>
           <Grid item xs={12} md={6}>
             <Typography variant="h6" className={classes.title}>
               Text only
@@ -111,7 +111,7 @@ class InteractiveList extends React.Component {
             </div>
           </Grid>
         </Grid>
-        <Grid container spacing={16}>
+        <Grid container spacing={2}>
           <Grid item xs={12} md={6}>
             <Typography variant="h6" className={classes.title}>
               Avatar with text
diff --git a/docs/src/pages/demos/text-fields/InputWithIcon.js b/docs/src/pages/demos/text-fields/InputWithIcon.js
index d96bcabc23e79c..7c0447c6ae7c2d 100644
--- a/docs/src/pages/demos/text-fields/InputWithIcon.js
+++ b/docs/src/pages/demos/text-fields/InputWithIcon.js
@@ -45,7 +45,7 @@ function InputWithIcon(props) {
       />
 
       <div className={classes.margin}>
-        <Grid container spacing={8} alignItems="flex-end">
+        <Grid container spacing={1} alignItems="flex-end">
           <Grid item>
             <AccountCircle />
           </Grid>
diff --git a/docs/src/pages/demos/tooltips/PositionedTooltips.js b/docs/src/pages/demos/tooltips/PositionedTooltips.js
index 95e5a0864b084c..4de9e0ecd26c65 100644
--- a/docs/src/pages/demos/tooltips/PositionedTooltips.js
+++ b/docs/src/pages/demos/tooltips/PositionedTooltips.js
@@ -42,7 +42,7 @@ function PositionedTooltips(props) {
             <Button>left-end</Button>
           </Tooltip>
         </Grid>
-        <Grid item container xs={6} alignItems="flex-end" direction="column" spacing={0}>
+        <Grid item container xs={6} alignItems="flex-end" direction="column">
           <Grid item>
             <Tooltip title="Add" placement="right-start">
               <Button>right-start</Button>
diff --git a/docs/src/pages/discover-more/team/Team.js b/docs/src/pages/discover-more/team/Team.js
index 07c7c1f77b5990..93da5d7e9e905f 100644
--- a/docs/src/pages/discover-more/team/Team.js
+++ b/docs/src/pages/discover-more/team/Team.js
@@ -108,7 +108,7 @@ const styles = theme => ({
 function Team(props) {
   const { classes } = props;
   return (
-    <Grid container spacing={16}>
+    <Grid container spacing={2}>
       {members.map(member => (
         <Grid key={member.name} item xs={12} md={6}>
           <Paper>
diff --git a/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js b/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js
index ae46a87faa40da..4d8cf49c0b99bf 100644
--- a/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js
+++ b/docs/src/pages/getting-started/page-layout-examples/PageLayoutExamples.js
@@ -88,7 +88,7 @@ function PageLayoutExamples(props) {
   const { classes, t } = props;
 
   return (
-    <Grid container spacing={16}>
+    <Grid container spacing={2}>
       {layouts(t).map(layout => (
         <Grid item sm={6} md={4} className={classes.item} key={layout.title}>
           <Card className={classes.card}>
diff --git a/docs/src/pages/getting-started/page-layout-examples/album/Album.js b/docs/src/pages/getting-started/page-layout-examples/album/Album.js
index 2a634ddf808156..46f308a2998a86 100644
--- a/docs/src/pages/getting-started/page-layout-examples/album/Album.js
+++ b/docs/src/pages/getting-started/page-layout-examples/album/Album.js
@@ -91,7 +91,7 @@ function Album(props) {
               entirely.
             </Typography>
             <div className={classes.heroButtons}>
-              <Grid container spacing={16} justify="center">
+              <Grid container spacing={2} justify="center">
                 <Grid item>
                   <Button variant="contained" color="primary">
                     Main call to action
@@ -108,7 +108,7 @@ function Album(props) {
         </div>
         <div className={clsx(classes.layout, classes.cardGrid)}>
           {/* End hero unit */}
-          <Grid container spacing={40}>
+          <Grid container spacing={5}>
             {cards.map(card => (
               <Grid item key={card} sm={6} md={4} lg={3}>
                 <Card className={classes.card}>
diff --git a/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js b/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js
index 1048d99cfda32e..556bea9907d0b6 100644
--- a/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js
+++ b/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js
@@ -178,7 +178,7 @@ function Blog(props) {
           </Paper>
           {/* End main featured post */}
           {/* Sub featured posts */}
-          <Grid container spacing={40} className={classes.cardGrid}>
+          <Grid container spacing={5} className={classes.cardGrid}>
             {featuredPosts.map(post => (
               <Grid item key={post.title} xs={12} md={6}>
                 <Card className={classes.card}>
@@ -210,7 +210,7 @@ function Blog(props) {
             ))}
           </Grid>
           {/* End sub featured posts */}
-          <Grid container spacing={40} className={classes.mainGrid}>
+          <Grid container spacing={5} className={classes.mainGrid}>
             {/* Main content */}
             <Grid item xs={12} md={8}>
               <Typography variant="h6" gutterBottom>
diff --git a/docs/src/pages/getting-started/page-layout-examples/checkout/AddressForm.js b/docs/src/pages/getting-started/page-layout-examples/checkout/AddressForm.js
index 970d96d1fa456c..2edde63e3785c2 100644
--- a/docs/src/pages/getting-started/page-layout-examples/checkout/AddressForm.js
+++ b/docs/src/pages/getting-started/page-layout-examples/checkout/AddressForm.js
@@ -11,7 +11,7 @@ function AddressForm() {
       <Typography variant="h6" gutterBottom>
         Shipping address
       </Typography>
-      <Grid container spacing={24}>
+      <Grid container spacing={3}>
         <Grid item xs={12} sm={6}>
           <TextField
             required
diff --git a/docs/src/pages/getting-started/page-layout-examples/checkout/PaymentForm.js b/docs/src/pages/getting-started/page-layout-examples/checkout/PaymentForm.js
index 2c2ba129df1fb9..7ef272b1ad48f4 100644
--- a/docs/src/pages/getting-started/page-layout-examples/checkout/PaymentForm.js
+++ b/docs/src/pages/getting-started/page-layout-examples/checkout/PaymentForm.js
@@ -11,7 +11,7 @@ function PaymentForm() {
       <Typography variant="h6" gutterBottom>
         Payment method
       </Typography>
-      <Grid container spacing={24}>
+      <Grid container spacing={3}>
         <Grid item xs={12} md={6}>
           <TextField required id="cardName" label="Name on card" fullWidth />
         </Grid>
diff --git a/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js b/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js
index a83fd1481b2230..a196e7a0857017 100644
--- a/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js
+++ b/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js
@@ -55,7 +55,7 @@ function Review(props) {
           </Typography>
         </ListItem>
       </List>
-      <Grid container spacing={16}>
+      <Grid container spacing={2}>
         <Grid item xs={12} sm={6}>
           <Typography variant="h6" gutterBottom className={classes.title}>
             Shipping
diff --git a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
index c4c2a409676b3d..ffdc345a1d7f07 100644
--- a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
+++ b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
@@ -146,7 +146,7 @@ function Pricing(props) {
           </Typography>
         </div>
         {/* End hero unit */}
-        <Grid container spacing={40} alignItems="flex-end">
+        <Grid container spacing={5} alignItems="flex-end">
           {tiers.map(tier => (
             // Enterprise card is full width at sm breakpoint
             <Grid item key={tier.title} xs={12} sm={tier.title === 'Enterprise' ? 12 : 6} md={4}>
@@ -186,7 +186,7 @@ function Pricing(props) {
       </main>
       {/* Footer */}
       <footer className={clsx(classes.footer, classes.layout)}>
-        <Grid container spacing={32} justify="space-evenly">
+        <Grid container spacing={4} justify="space-evenly">
           {footers.map(footer => (
             <Grid item xs key={footer.title}>
               <Typography variant="h6" color="textPrimary" gutterBottom>
diff --git a/docs/src/pages/lab/toggle-button/ToggleButtons.js b/docs/src/pages/lab/toggle-button/ToggleButtons.js
index 3e85e6eba23ea3..5b9970f0ce9b3b 100644
--- a/docs/src/pages/lab/toggle-button/ToggleButtons.js
+++ b/docs/src/pages/lab/toggle-button/ToggleButtons.js
@@ -42,7 +42,7 @@ class ToggleButtons extends React.Component {
     const { alignment, formats } = this.state;
 
     return (
-      <Grid container spacing={16}>
+      <Grid container spacing={2}>
         <Grid item xs={12} sm={6}>
           <div className={classes.toggleContainer}>
             <ToggleButtonGroup value={alignment} exclusive onChange={this.handleAlignment}>
diff --git a/docs/src/pages/layout/grid/AutoGrid.js b/docs/src/pages/layout/grid/AutoGrid.js
index 77abc02d5437b1..587380d9fe5f96 100644
--- a/docs/src/pages/layout/grid/AutoGrid.js
+++ b/docs/src/pages/layout/grid/AutoGrid.js
@@ -20,7 +20,7 @@ function AutoGrid(props) {
 
   return (
     <div className={classes.root}>
-      <Grid container spacing={24}>
+      <Grid container spacing={3}>
         <Grid item xs>
           <Paper className={classes.paper}>xs</Paper>
         </Grid>
@@ -31,7 +31,7 @@ function AutoGrid(props) {
           <Paper className={classes.paper}>xs</Paper>
         </Grid>
       </Grid>
-      <Grid container spacing={24}>
+      <Grid container spacing={3}>
         <Grid item xs>
           <Paper className={classes.paper}>xs</Paper>
         </Grid>
diff --git a/docs/src/pages/layout/grid/AutoGridNoWrap.js b/docs/src/pages/layout/grid/AutoGridNoWrap.js
index 97eb008c9c4252..39b3a9dd961d94 100644
--- a/docs/src/pages/layout/grid/AutoGridNoWrap.js
+++ b/docs/src/pages/layout/grid/AutoGridNoWrap.js
@@ -28,7 +28,7 @@ function AutoGridNoWrap(props) {
   return (
     <div className={classes.root}>
       <Paper className={classes.paper}>
-        <Grid container wrap="nowrap" spacing={16}>
+        <Grid container wrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
@@ -38,7 +38,7 @@ function AutoGridNoWrap(props) {
         </Grid>
       </Paper>
       <Paper className={classes.paper}>
-        <Grid container wrap="nowrap" spacing={16}>
+        <Grid container wrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
@@ -48,7 +48,7 @@ function AutoGridNoWrap(props) {
         </Grid>
       </Paper>
       <Paper className={classes.paper}>
-        <Grid container wrap="nowrap" spacing={16}>
+        <Grid container wrap="nowrap" spacing={2}>
           <Grid item>
             <Avatar>W</Avatar>
           </Grid>
diff --git a/docs/src/pages/layout/grid/CSSGrid.js b/docs/src/pages/layout/grid/CSSGrid.js
index 9b539394e6d830..0900454771c3e7 100644
--- a/docs/src/pages/layout/grid/CSSGrid.js
+++ b/docs/src/pages/layout/grid/CSSGrid.js
@@ -32,7 +32,7 @@ function CSSGrid(props) {
       <Typography variant="subtitle1" gutterBottom>
         Material-UI Grid:
       </Typography>
-      <Grid container spacing={24}>
+      <Grid container spacing={3}>
         <Grid item xs={3}>
           <Paper className={classes.paper}>xs=3</Paper>
         </Grid>
diff --git a/docs/src/pages/layout/grid/CenteredGrid.js b/docs/src/pages/layout/grid/CenteredGrid.js
index a742a1dc798868..23abc2fb02c9e3 100644
--- a/docs/src/pages/layout/grid/CenteredGrid.js
+++ b/docs/src/pages/layout/grid/CenteredGrid.js
@@ -20,7 +20,7 @@ function CenteredGrid(props) {
 
   return (
     <div className={classes.root}>
-      <Grid container spacing={24}>
+      <Grid container spacing={3}>
         <Grid item xs={12}>
           <Paper className={classes.paper}>xs=12</Paper>
         </Grid>
diff --git a/docs/src/pages/layout/grid/ComplexGrid.js b/docs/src/pages/layout/grid/ComplexGrid.js
index dfd2b2d3ea9772..2845b71cee7d2b 100644
--- a/docs/src/pages/layout/grid/ComplexGrid.js
+++ b/docs/src/pages/layout/grid/ComplexGrid.js
@@ -32,14 +32,14 @@ function ComplexGrid(props) {
   return (
     <div className={classes.root}>
       <Paper className={classes.paper}>
-        <Grid container spacing={16}>
+        <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={16}>
+            <Grid item xs container direction="column" spacing={2}>
               <Grid item xs>
                 <Typography gutterBottom variant="subtitle1">
                   Standard license
diff --git a/docs/src/pages/layout/grid/FullWidthGrid.js b/docs/src/pages/layout/grid/FullWidthGrid.js
index 08958327cd7a9d..7a645615bf4ff7 100644
--- a/docs/src/pages/layout/grid/FullWidthGrid.js
+++ b/docs/src/pages/layout/grid/FullWidthGrid.js
@@ -20,7 +20,7 @@ function FullWidthGrid(props) {
 
   return (
     <div className={classes.root}>
-      <Grid container spacing={24}>
+      <Grid container spacing={3}>
         <Grid item xs={12}>
           <Paper className={classes.paper}>xs=12</Paper>
         </Grid>
diff --git a/docs/src/pages/layout/grid/InteractiveGrid.js b/docs/src/pages/layout/grid/InteractiveGrid.js
index 020e5680af7e63..69743c883e8240 100644
--- a/docs/src/pages/layout/grid/InteractiveGrid.js
+++ b/docs/src/pages/layout/grid/InteractiveGrid.js
@@ -60,7 +60,7 @@ class InteractiveGrid extends React.Component {
         <Grid item xs={12}>
           <Grid
             container
-            spacing={16}
+            spacing={2}
             className={classes.demo}
             alignItems={alignItems}
             direction={direction}
@@ -80,7 +80,7 @@ class InteractiveGrid extends React.Component {
         </Grid>
         <Grid item xs={12}>
           <Paper className={classes.control}>
-            <Grid container spacing={24}>
+            <Grid container spacing={3}>
               <Grid item xs={12}>
                 <FormControl component="fieldset">
                   <FormLabel>direction</FormLabel>
diff --git a/docs/src/pages/layout/grid/NestedGrid.js b/docs/src/pages/layout/grid/NestedGrid.js
index 601e3a7790a285..037abda0af18df 100644
--- a/docs/src/pages/layout/grid/NestedGrid.js
+++ b/docs/src/pages/layout/grid/NestedGrid.js
@@ -42,14 +42,14 @@ function NestedGrid(props) {
 
   return (
     <div className={classes.root}>
-      <Grid container spacing={8}>
-        <Grid container item xs={12} spacing={24}>
+      <Grid container spacing={1}>
+        <Grid container item xs={12} spacing={3}>
           <FormRow classes={classes} />
         </Grid>
-        <Grid container item xs={12} spacing={24}>
+        <Grid container item xs={12} spacing={3}>
           <FormRow classes={classes} />
         </Grid>
-        <Grid container item xs={12} spacing={24}>
+        <Grid container item xs={12} spacing={3}>
           <FormRow classes={classes} />
         </Grid>
       </Grid>
diff --git a/docs/src/pages/layout/grid/SpacingGrid.js b/docs/src/pages/layout/grid/SpacingGrid.js
index d7c019155b654f..5f75e27650a947 100644
--- a/docs/src/pages/layout/grid/SpacingGrid.js
+++ b/docs/src/pages/layout/grid/SpacingGrid.js
@@ -23,7 +23,7 @@ const styles = theme => ({
 
 class GuttersGrid extends React.Component {
   state = {
-    spacing: '16',
+    spacing: '2',
   };
 
   handleChange = key => (event, value) => {
@@ -37,7 +37,7 @@ class GuttersGrid extends React.Component {
     const { spacing } = this.state;
 
     return (
-      <Grid container className={classes.root} spacing={16}>
+      <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 => (
@@ -60,11 +60,14 @@ class GuttersGrid extends React.Component {
                   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="16" control={<Radio />} label="16" />
-                  <FormControlLabel value="24" control={<Radio />} label="24" />
-                  <FormControlLabel value="32" control={<Radio />} label="32" />
-                  <FormControlLabel value="40" control={<Radio />} label="40" />
                 </RadioGroup>
               </Grid>
             </Grid>
diff --git a/docs/src/pages/layout/grid/grid-zh.md b/docs/src/pages/layout/grid/grid-zh.md
index d11de540433bb8..1779a1b50771ad 100644
--- a/docs/src/pages/layout/grid/grid-zh.md
+++ b/docs/src/pages/layout/grid/grid-zh.md
@@ -85,7 +85,7 @@ https://www.w3.org/TR/css-flexbox-1/#box-model
 ```jsx
   <body>
     <div style={{ padding: 20 }}>
-      <Grid container spacing={40}>
+      <Grid container spacing={5}>
         //...
       </Grid>
     </div>
@@ -110,4 +110,4 @@ Flex 项目的初始设置为 `min-width: auto`。当子级使用 `white-space:
   <Typography noWrap>
 ```
 
-{{"demo": "pages/layout/grid/AutoGridNoWrap.js"}}
\ No newline at end of file
+{{"demo": "pages/layout/grid/AutoGridNoWrap.js"}}
diff --git a/docs/src/pages/layout/grid/grid.md b/docs/src/pages/layout/grid/grid.md
index 92d38217d752d9..2fcc5359ae2d55 100644
--- a/docs/src/pages/layout/grid/grid.md
+++ b/docs/src/pages/layout/grid/grid.md
@@ -93,7 +93,7 @@ There are 3 available workarounds:
 ```jsx
   <body>
     <div style={{ padding: 20 }}>
-      <Grid container spacing={40}>
+      <Grid container spacing={4}>
         //...
       </Grid>
     </div>
diff --git a/docs/src/pages/layout/hidden/GridIntegration.js b/docs/src/pages/layout/hidden/GridIntegration.js
index 3416ed3bcbcb9b..37fc501dd62bb2 100644
--- a/docs/src/pages/layout/hidden/GridIntegration.js
+++ b/docs/src/pages/layout/hidden/GridIntegration.js
@@ -27,7 +27,7 @@ function GridIntegration(props) {
       <Typography variant="subtitle1" gutterBottom>
         Current width: {props.width}
       </Typography>
-      <Grid container spacing={24}>
+      <Grid container spacing={3}>
         <Hidden xsUp>
           <Grid item xs>
             <Paper className={classes.paper}>xsUp</Paper>
diff --git a/docs/src/pages/premium-themes/PremiumThemes.js b/docs/src/pages/premium-themes/PremiumThemes.js
index 5b9e7e0a2e7d5e..eeab7c31f31136 100644
--- a/docs/src/pages/premium-themes/PremiumThemes.js
+++ b/docs/src/pages/premium-themes/PremiumThemes.js
@@ -105,7 +105,7 @@ function themes(t) {
 function PremiumThemes(props) {
   const { classes, t } = props;
   return (
-    <Grid container spacing={16}>
+    <Grid container spacing={2}>
       {themes(t).map(theme => (
         <Grid key={theme.name} item xs={12} md={6}>
           <Card className={classes.card}>
diff --git a/docs/src/pages/premium-themes/instapaper/pages/instapaper/Profile.js b/docs/src/pages/premium-themes/instapaper/pages/instapaper/Profile.js
index 067354f5e8b3e0..af79e7b7337d30 100644
--- a/docs/src/pages/premium-themes/instapaper/pages/instapaper/Profile.js
+++ b/docs/src/pages/premium-themes/instapaper/pages/instapaper/Profile.js
@@ -68,7 +68,7 @@ function ProfilePage() {
                 </Grid>
               </Box>
               <Box mb="20px">
-                <Grid container spacing={40}>
+                <Grid container spacing={5}>
                   <Grid item>
                     <Typography variant="subtitle1">
                       <b>132</b> posts
@@ -106,7 +106,7 @@ function ProfilePage() {
           <Tab label="Saved" icon={<Icon>bookmark_border_outlined</Icon>} />
           <Tab label="Tagged" />
         </Tabs>
-        <Grid container spacing={32}>
+        <Grid container spacing={4}>
           <Grid item xs={4}>
             <img
               alt="post"
diff --git a/docs/src/pages/premium-themes/onepirate/SignUp.js b/docs/src/pages/premium-themes/onepirate/SignUp.js
index fae9720e37552b..8cac856bf3f739 100644
--- a/docs/src/pages/premium-themes/onepirate/SignUp.js
+++ b/docs/src/pages/premium-themes/onepirate/SignUp.js
@@ -74,7 +74,7 @@ class SignUp extends React.Component {
           >
             {({ handleSubmit, submitting }) => (
               <form onSubmit={handleSubmit} className={classes.form} noValidate>
-                <Grid container spacing={16}>
+                <Grid container spacing={2}>
                   <Grid item xs={12} sm={6}>
                     <Field
                       autoFocus
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
index 19e3730c41b8a1..4d3ad786be236d 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
@@ -69,14 +69,14 @@ function AppFooter(props) {
   return (
     <Typography component="footer" className={classes.root}>
       <LayoutBody className={classes.layoutBody} width="large">
-        <Grid container spacing={40}>
+        <Grid container spacing={5}>
           <Grid item xs={6} sm={4} md={2}>
             <Grid
               container
               direction="column"
               justify="flex-end"
               className={classes.iconsWrapper}
-              spacing={16}
+              spacing={2}
             >
               <Grid item className={classes.icons}>
                 <a href="https://material-ui.com/" className={classes.icon}>
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js
index 687a543a78ba05..2a4d0d8c6362cd 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js
@@ -81,7 +81,7 @@ class ProductCTA extends React.Component {
 
     return (
       <LayoutBody className={classes.root} component="section" width="large">
-        <Grid container spacing={0}>
+        <Grid container>
           <Grid item xs={12} md={6} className={classes.cardWrapper}>
             <div className={classes.card}>
               <form onSubmit={this.handleSubmit} className={classes.cardContent}>
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
index a2182b2bdad197..8e3396363d3d52 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
@@ -67,7 +67,7 @@ function ProductHowItWorks(props) {
           How it works
         </Typography>
         <div>
-          <Grid container spacing={40}>
+          <Grid container spacing={5}>
             <Grid item xs={12} md={4}>
               <div className={classes.item}>
                 <div className={classes.number}>1.</div>
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js
index 66ac54e50caa48..aa751662675203 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js
@@ -48,7 +48,7 @@ function ProductValues(props) {
           className={classes.curvyLines}
           alt="curvy lines"
         />
-        <Grid container spacing={40}>
+        <Grid container spacing={5}>
           <Grid item xs={12} md={4}>
             <div className={classes.item}>
               <img
diff --git a/docs/src/pages/premium-themes/paperbase/Content.js b/docs/src/pages/premium-themes/paperbase/Content.js
index 33a7f797908625..5ce42c7c69aedc 100644
--- a/docs/src/pages/premium-themes/paperbase/Content.js
+++ b/docs/src/pages/premium-themes/paperbase/Content.js
@@ -43,7 +43,7 @@ function Content(props) {
     <Paper className={classes.paper}>
       <AppBar className={classes.searchBar} position="static" color="default" elevation={0}>
         <Toolbar>
-          <Grid container spacing={16} alignItems="center">
+          <Grid container spacing={2} alignItems="center">
             <Grid item>
               <SearchIcon className={classes.block} color="inherit" />
             </Grid>
diff --git a/docs/src/pages/premium-themes/paperbase/Header.js b/docs/src/pages/premium-themes/paperbase/Header.js
index d70ce9c71c547c..3d25c2566ccfb8 100644
--- a/docs/src/pages/premium-themes/paperbase/Header.js
+++ b/docs/src/pages/premium-themes/paperbase/Header.js
@@ -47,7 +47,7 @@ function Header(props) {
     <React.Fragment>
       <AppBar color="primary" position="sticky" elevation={0}>
         <Toolbar>
-          <Grid container spacing={8} alignItems="center">
+          <Grid container spacing={1} alignItems="center">
             <Hidden smUp>
               <Grid item>
                 <IconButton
@@ -89,7 +89,7 @@ function Header(props) {
         elevation={0}
       >
         <Toolbar>
-          <Grid container alignItems="center" spacing={8}>
+          <Grid container alignItems="center" spacing={1}>
             <Grid item xs>
               <Typography color="inherit" variant="h5">
                 Authentication
diff --git a/docs/src/pages/premium-themes/tweeper/components/tweeper/Header.js b/docs/src/pages/premium-themes/tweeper/components/tweeper/Header.js
index 06c215b02acb59..b621301618541f 100644
--- a/docs/src/pages/premium-themes/tweeper/components/tweeper/Header.js
+++ b/docs/src/pages/premium-themes/tweeper/components/tweeper/Header.js
@@ -12,7 +12,7 @@ const { Tabs, Tab, ListItem, InputAdornment } = molecules;
 const Header = () => (
   <AppBar position="sticky" elevation={1}>
     <Toolbar>
-      <Grid container alignItems="center" spacing={16}>
+      <Grid container alignItems="center" spacing={2}>
         <Grid item xs={6} sm={4}>
           <Tabs value={0} variant="fullWidth">
             <Tab
diff --git a/docs/src/pages/premium-themes/tweeper/components/tweeper/Tweet.js b/docs/src/pages/premium-themes/tweeper/components/tweeper/Tweet.js
index d3213c1038a7ca..b0d8591de9aed1 100644
--- a/docs/src/pages/premium-themes/tweeper/components/tweeper/Tweet.js
+++ b/docs/src/pages/premium-themes/tweeper/components/tweeper/Tweet.js
@@ -21,7 +21,7 @@ function Tweet() {
   return (
     <ListItem button className={classes.root}>
       <Box mb="5px">
-        <Grid container spacing={8}>
+        <Grid container spacing={1}>
           <Grid item>
             <Box
               display="flex"
@@ -40,7 +40,7 @@ function Tweet() {
           </Grid>
         </Grid>
       </Box>
-      <Grid container spacing={8} wrap="nowrap">
+      <Grid container spacing={1} wrap="nowrap">
         <Grid item>
           <Avatar
             medium
@@ -50,7 +50,7 @@ function Tweet() {
           />
         </Grid>
         <Grid item>
-          <Grid container spacing={16}>
+          <Grid container spacing={2}>
             <Grid item xs={12}>
               <Typography bold inline>
                 Dan Abramov
diff --git a/docs/src/pages/premium-themes/tweeper/pages/tweeper/Profile.js b/docs/src/pages/premium-themes/tweeper/pages/tweeper/Profile.js
index 630c155ed73d15..dcd90b551756ce 100644
--- a/docs/src/pages/premium-themes/tweeper/pages/tweeper/Profile.js
+++ b/docs/src/pages/premium-themes/tweeper/pages/tweeper/Profile.js
@@ -38,7 +38,7 @@ function Profile() {
       <CssBaseline />
       <Header />
       <Content>
-        <Grid container spacing={16}>
+        <Grid container spacing={2}>
           <Grid item xs={12} md={8}>
             <Feed>
               <Cover />
diff --git a/docs/src/pages/style/color/ColorTool.js b/docs/src/pages/style/color/ColorTool.js
index 468d15a9c4b3e9..ef91c7ab888047 100644
--- a/docs/src/pages/style/color/ColorTool.js
+++ b/docs/src/pages/style/color/ColorTool.js
@@ -243,7 +243,7 @@ class ColorTool extends React.Component {
     };
 
     return (
-      <Grid container spacing={40} className={classes.root}>
+      <Grid container spacing={5} className={classes.root}>
         {colorPicker('primary')}
         {colorPicker('secondary')}
         <Grid item xs={12} sm={6} md={4}>
diff --git a/docs/src/pages/system/basics/RealWorld.js b/docs/src/pages/system/basics/RealWorld.js
index 89b4496f44ee52..92345d8f9e5bbe 100644
--- a/docs/src/pages/system/basics/RealWorld.js
+++ b/docs/src/pages/system/basics/RealWorld.js
@@ -11,7 +11,7 @@ function RealWorld() {
   return (
     <Box clone pt={2} pr={1} pb={1} pl={2}>
       <Paper elevation={0}>
-        <Grid container spacing={16} alignItems="center" wrap="nowrap">
+        <Grid container spacing={2} alignItems="center" wrap="nowrap">
           <Grid item>
             <Box bgcolor="primary.main" clone>
               <Avatar>
@@ -23,7 +23,7 @@ function RealWorld() {
             <Typography>You have lost connection to the internet. This app is offline.</Typography>
           </Grid>
         </Grid>
-        <Grid container justify="flex-end" spacing={8}>
+        <Grid container justify="flex-end" spacing={1}>
           <Grid item>
             <Button color="primary">Turn on wifi</Button>
           </Grid>
diff --git a/docs/src/pages/utils/popover/AnchorPlayground.js b/docs/src/pages/utils/popover/AnchorPlayground.js
index f4733cc5688702..bba132d8efca5b 100644
--- a/docs/src/pages/utils/popover/AnchorPlayground.js
+++ b/docs/src/pages/utils/popover/AnchorPlayground.js
@@ -142,7 +142,7 @@ class AnchorPlayground extends React.Component {
 
     return (
       <div>
-        <Grid container justify="center" spacing={0}>
+        <Grid container justify="center">
           <Grid item className={classes.buttonWrapper}>
             <Button
               buttonRef={node => {
@@ -181,7 +181,7 @@ class AnchorPlayground extends React.Component {
         >
           <Typography className={classes.typography}>The content of the Popover.</Typography>
         </Popover>
-        <Grid container spacing={16}>
+        <Grid container spacing={2}>
           <Grid item xs={12} sm={6}>
             <FormControl component="fieldset">
               <FormLabel component="legend">anchorReference</FormLabel>
diff --git a/docs/src/pages/utils/popper/PositionedPopper.js b/docs/src/pages/utils/popper/PositionedPopper.js
index 4f9a5a92af1098..e69b1db2b6c143 100644
--- a/docs/src/pages/utils/popper/PositionedPopper.js
+++ b/docs/src/pages/utils/popper/PositionedPopper.js
@@ -63,7 +63,7 @@ class PositionedPopper extends React.Component {
             <br />
             <Button onClick={this.handleClick('left-end')}>left-end</Button>
           </Grid>
-          <Grid item container xs={6} alignItems="flex-end" direction="column" spacing={0}>
+          <Grid item container xs={6} alignItems="flex-end" direction="column">
             <Grid item>
               <Button onClick={this.handleClick('right-start')}>right-start</Button>
             </Grid>
diff --git a/docs/src/pages/utils/popper/ScrollPlayground.js b/docs/src/pages/utils/popper/ScrollPlayground.js
index 0dd969760d3d79..718bd1569bfdce 100644
--- a/docs/src/pages/utils/popper/ScrollPlayground.js
+++ b/docs/src/pages/utils/popper/ScrollPlayground.js
@@ -239,7 +239,7 @@ class AnchorPlayground extends React.Component {
             </Grid>
           </RootRef>
         </div>
-        <Grid container spacing={16}>
+        <Grid container spacing={2}>
           <Grid item xs={12} sm={6}>
             <Typography gutterBottom variant="h6">
               Appearance
diff --git a/packages/material-ui/src/Grid/Grid.d.ts b/packages/material-ui/src/Grid/Grid.d.ts
index d73a84560b2e1b..92c84800670757 100644
--- a/packages/material-ui/src/Grid/Grid.d.ts
+++ b/packages/material-ui/src/Grid/Grid.d.ts
@@ -14,7 +14,7 @@ export type GridContentAlignment =
 
 export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 
-export type GridSpacing = 0 | 8 | 16 | 24 | 32 | 40;
+export type GridSpacing = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
 export type GridJustification =
   | 'flex-start'
diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js
index 9fcf1aa6e02433..428d32d4d02bcd 100644
--- a/packages/material-ui/src/Grid/Grid.js
+++ b/packages/material-ui/src/Grid/Grid.js
@@ -17,7 +17,7 @@ import withStyles from '../styles/withStyles';
 import { keys as breakpointKeys } from '../styles/createBreakpoints';
 import requirePropFactory from '../utils/requirePropFactory';
 
-const GUTTERS = [0, 8, 16, 24, 32, 40];
+const GUTTERS = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
 function generateGrid(globalStyles, theme, breakpoint) {
@@ -74,11 +74,13 @@ function generateGutter(theme, breakpoint) {
       return;
     }
 
+    const themeSpacing = spacing * theme.spacing.unit;
+
     styles[`spacing-${breakpoint}-${spacing}`] = {
-      margin: -spacing / 2,
-      width: `calc(100% + ${spacing}px)`,
+      margin: -themeSpacing / 2,
+      width: `calc(100% + ${themeSpacing}px)`,
       '& > $item': {
-        padding: spacing / 2,
+        padding: themeSpacing / 2,
       },
     };
   });
diff --git a/packages/material-ui/src/Grid/Grid.test.js b/packages/material-ui/src/Grid/Grid.test.js
index a9cc2bb4643daa..36ecb20fb70e4a 100644
--- a/packages/material-ui/src/Grid/Grid.test.js
+++ b/packages/material-ui/src/Grid/Grid.test.js
@@ -58,8 +58,8 @@ describe('<Grid />', () => {
 
   describe('prop: spacing', () => {
     it('should have a spacing', () => {
-      const wrapper = shallow(<Grid container spacing={8} />);
-      assert.strictEqual(wrapper.hasClass(classes['spacing-xs-8']), true);
+      const wrapper = shallow(<Grid container spacing={1} />);
+      assert.strictEqual(wrapper.hasClass(classes['spacing-xs-1']), true);
     });
   });
 
diff --git a/pages/api/grid.md b/pages/api/grid.md
index 52751db0d7fe28..49c2366a54866f 100644
--- a/pages/api/grid.md
+++ b/pages/api/grid.md
@@ -30,7 +30,7 @@ import Grid from '@material-ui/core/Grid';
 | <span class="prop-name">lg</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br></span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">md</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br></span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">sm</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br></span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. |
-| <span class="prop-name">spacing</span> | <span class="prop-type">enum:&nbsp;0, 8, 16, 24, 32, 40<br></span> | <span class="prop-default">0</span> | Defines the space between the type `item` component. It can only be used on a type `container` component. |
+| <span class="prop-name">spacing</span> | <span class="prop-type">enum:&nbsp;0, 1, 2, 3, 4, 5, 6, 7, 8<br></span> | <span class="prop-default">0</span> | Defines the space between the type `item` component. It can only be used on a type `container` component. |
 | <span class="prop-name">wrap</span> | <span class="prop-type">enum:&nbsp;'nowrap'&nbsp;&#124;<br>&nbsp;'wrap'&nbsp;&#124;<br>&nbsp;'wrap-reverse'<br></span> | <span class="prop-default">'wrap'</span> | Defines the `flex-wrap` style property. It's applied for all screen sizes. |
 | <span class="prop-name">xl</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br></span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. |
 | <span class="prop-name">xs</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br></span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. |
@@ -68,11 +68,14 @@ This property accepts the following keys:
 | <span class="prop-name">justify-xs-space-between</span> | 
 | <span class="prop-name">justify-xs-space-around</span> | 
 | <span class="prop-name">justify-xs-space-evenly</span> | 
+| <span class="prop-name">spacing-xs-1</span> | 
+| <span class="prop-name">spacing-xs-2</span> | 
+| <span class="prop-name">spacing-xs-3</span> | 
+| <span class="prop-name">spacing-xs-4</span> | 
+| <span class="prop-name">spacing-xs-5</span> | 
+| <span class="prop-name">spacing-xs-6</span> | 
+| <span class="prop-name">spacing-xs-7</span> | 
 | <span class="prop-name">spacing-xs-8</span> | 
-| <span class="prop-name">spacing-xs-16</span> | 
-| <span class="prop-name">spacing-xs-24</span> | 
-| <span class="prop-name">spacing-xs-32</span> | 
-| <span class="prop-name">spacing-xs-40</span> | 
 | <span class="prop-name">grid-xs-auto</span> | 
 | <span class="prop-name">grid-xs-true</span> | 
 | <span class="prop-name">grid-xs-1</span> | 
diff --git a/test/regressions/tests/Grid/AutoGrid.js b/test/regressions/tests/Grid/AutoGrid.js
index 72a975a49620d8..78569917cb2a07 100644
--- a/test/regressions/tests/Grid/AutoGrid.js
+++ b/test/regressions/tests/Grid/AutoGrid.js
@@ -19,7 +19,7 @@ function AutoGrid(props) {
 
   return (
     <div className={classes.root}>
-      <Grid container spacing={24}>
+      <Grid container spacing={3}>
         <Grid item xs>
           <Paper className={classes.paper}>xs</Paper>
         </Grid>
@@ -30,7 +30,7 @@ function AutoGrid(props) {
           <Paper className={classes.paper}>xs</Paper>
         </Grid>
       </Grid>
-      <Grid container spacing={24}>
+      <Grid container spacing={3}>
         <Grid item xs>
           <Paper className={classes.paper}>xs</Paper>
         </Grid>
diff --git a/test/regressions/tests/Grid/SimpleGrid.js b/test/regressions/tests/Grid/SimpleGrid.js
index b5e6de27c8685d..ad7a20e97cd27d 100644
--- a/test/regressions/tests/Grid/SimpleGrid.js
+++ b/test/regressions/tests/Grid/SimpleGrid.js
@@ -19,7 +19,7 @@ function SimpleGrid(props) {
 
   return (
     <div className={classes.root}>
-      <Grid container spacing={24}>
+      <Grid container spacing={3}>
         <Grid item xs={12}>
           <Paper className={classes.paper}>xs=12</Paper>
         </Grid>
diff --git a/test/regressions/tests/Grid/StressGrid.js b/test/regressions/tests/Grid/StressGrid.js
index b9b72a24ebe9b7..07eacce3a5b105 100644
--- a/test/regressions/tests/Grid/StressGrid.js
+++ b/test/regressions/tests/Grid/StressGrid.js
@@ -20,8 +20,8 @@ function StressGrid(props) {
 
   return (
     <div className={classes.root}>
-      <Grid container spacing={24} direction="column">
-        <Grid container item spacing={8}>
+      <Grid container spacing={3} direction="column">
+        <Grid container item spacing={1}>
           <Grid item xs={3}>
             <Paper className={classes.paper}>xs=3</Paper>
           </Grid>
@@ -29,7 +29,7 @@ function StressGrid(props) {
             <Paper className={classes.paper}>xs=9</Paper>
           </Grid>
         </Grid>
-        <Grid container item spacing={8} direction="row-reverse">
+        <Grid container item spacing={1} direction="row-reverse">
           <Grid item xs={3}>
             <Paper className={classes.paper}>first</Paper>
           </Grid>
@@ -37,7 +37,7 @@ function StressGrid(props) {
             <Paper className={classes.paper}>last</Paper>
           </Grid>
         </Grid>
-        <Grid container item spacing={8} justify="space-between">
+        <Grid container item spacing={1} justify="space-between">
           <Grid item xs={3}>
             <Paper className={classes.paper}>space</Paper>
           </Grid>
@@ -45,7 +45,7 @@ function StressGrid(props) {
             <Paper className={classes.paper}>between</Paper>
           </Grid>
         </Grid>
-        <Grid container item spacing={8} alignItems="stretch" direction="column-reverse">
+        <Grid container item spacing={1} alignItems="stretch" direction="column-reverse">
           <Grid item>
             <Paper className={classes.paper}>reverse</Paper>
           </Grid>
diff --git a/test/regressions/tests/Table/PaddingTable.js b/test/regressions/tests/Table/PaddingTable.js
index 374f6a69a8e7a5..1493b0561fc3a3 100644
--- a/test/regressions/tests/Table/PaddingTable.js
+++ b/test/regressions/tests/Table/PaddingTable.js
@@ -41,7 +41,7 @@ MyTable.propTypes = {
 function PaddingTable() {
   return (
     <div>
-      <Grid container spacing={16}>
+      <Grid container spacing={2}>
         <Grid item xs={6}>
           <MyTable padding="default" />
         </Grid>
diff --git a/test/regressions/tests/Tooltip/PositionedTooltips.js b/test/regressions/tests/Tooltip/PositionedTooltips.js
index ed6b15d299c2ce..f8f7790a781968 100644
--- a/test/regressions/tests/Tooltip/PositionedTooltips.js
+++ b/test/regressions/tests/Tooltip/PositionedTooltips.js
@@ -45,7 +45,7 @@ function PositionedTooltips(props) {
             <Button className={classes.fab}>left-end</Button>
           </Tooltip>
         </Grid>
-        <Grid item container xs={6} alignItems="flex-end" direction="column" spacing={0}>
+        <Grid item container xs={6} alignItems="flex-end" direction="column">
           <Grid item>
             <Tooltip open title="Add" placement="right-start">
               <Button className={classes.fab}>right-start</Button>

From 3519c2daa009e2dbc96c58936b2a24a7458d071a Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 6 Jan 2019 13:36:22 +0100
Subject: [PATCH 2/4] support custom transformations

---
 .size-limit.js                                |  8 +++-
 docs/src/modules/components/Ad.js             |  8 ++--
 docs/src/modules/components/AppContent.js     | 12 ++---
 docs/src/modules/components/AppDrawer.js      |  4 +-
 docs/src/modules/components/AppSearch.js      | 11 +++--
 .../modules/components/AppTableOfContents.js  |  7 ++-
 docs/src/modules/components/AppTheme.js       |  4 +-
 docs/src/modules/components/Carbon.js         |  7 +--
 docs/src/modules/components/CodeFund.js       |  7 +--
 docs/src/modules/components/Demo.js           | 16 +++----
 docs/src/modules/components/HomeBackers.js    |  4 +-
 docs/src/modules/components/HomeFooter.js     | 12 ++---
 docs/src/modules/components/HomeSteps.js      | 18 +++----
 docs/src/modules/components/MarkdownDocs.js   |  6 +--
 docs/src/modules/components/Tidelift.js       |  7 +--
 .../default-theme/DefaultTheme.js             |  6 +--
 .../pages/customization/themes/WithTheme.js   |  4 +-
 docs/src/pages/customization/themes/themes.md | 43 +++++++++++++++--
 docs/src/pages/demos/app-bar/BottomAppBar.js  |  8 ++--
 docs/src/pages/demos/app-bar/BottomAppBar.tsx |  8 ++--
 .../app-bar/PrimarySearchAppBar.hooks.js      | 14 +++---
 .../demos/app-bar/PrimarySearchAppBar.js      | 14 +++---
 .../demos/app-bar/PrimarySearchAppBar.tsx     | 14 +++---
 docs/src/pages/demos/app-bar/SearchAppBar.js  | 12 ++---
 docs/src/pages/demos/app-bar/SearchAppBar.tsx | 12 ++---
 .../autocomplete/IntegrationAutosuggest.js    |  4 +-
 .../IntegrationDownshift.hooks.js             |  6 +--
 .../autocomplete/IntegrationDownshift.js      |  6 +--
 .../IntegrationReactSelect.hooks.js           |  8 ++--
 .../autocomplete/IntegrationReactSelect.js    |  8 ++--
 docs/src/pages/demos/badges/BadgeMax.js       |  4 +-
 .../demos/badges/BadgeVisibility.hooks.js     |  4 +-
 .../src/pages/demos/badges/BadgeVisibility.js |  4 +-
 docs/src/pages/demos/badges/DotBadge.js       |  2 +-
 docs/src/pages/demos/badges/SimpleBadge.js    |  4 +-
 .../demos/breadcrumbs/CollapsedBreadcrumbs.js |  2 +-
 .../demos/breadcrumbs/CustomSeparator.js      |  2 +-
 .../breadcrumbs/CustomizedBreadcrumbs.js      |  4 +-
 .../demos/breadcrumbs/IconBreadcrumbs.js      |  4 +-
 .../demos/breadcrumbs/RouterBreadcrumbs.js    |  4 +-
 .../demos/breadcrumbs/SimpleBreadcrumbs.js    |  2 +-
 docs/src/pages/demos/buttons/ButtonBases.js   |  2 +-
 docs/src/pages/demos/buttons/ButtonSizes.js   |  4 +-
 .../pages/demos/buttons/ContainedButtons.js   |  2 +-
 .../pages/demos/buttons/CustomizedButtons.js  |  2 +-
 .../buttons/FloatingActionButtonZoom.hooks.js |  4 +-
 .../demos/buttons/FloatingActionButtonZoom.js |  4 +-
 .../demos/buttons/FloatingActionButtons.js    |  4 +-
 docs/src/pages/demos/buttons/IconButtons.js   |  2 +-
 .../pages/demos/buttons/IconLabelButtons.js   |  6 +--
 .../pages/demos/buttons/OutlinedButtons.js    |  2 +-
 docs/src/pages/demos/buttons/TextButtons.js   |  2 +-
 .../src/pages/demos/cards/MediaControlCard.js |  4 +-
 docs/src/pages/demos/chips/Chips.js           |  2 +-
 .../src/pages/demos/chips/ChipsArray.hooks.js |  4 +-
 docs/src/pages/demos/chips/ChipsArray.js      |  4 +-
 docs/src/pages/demos/chips/ChipsPlayground.js |  4 +-
 docs/src/pages/demos/chips/OutlinedChips.js   |  2 +-
 .../pages/demos/dialogs/CustomizedDialog.js   | 10 ++--
 .../src/pages/demos/dialogs/MaxWidthDialog.js |  4 +-
 .../pages/demos/dividers/MiddleDividers.js    |  8 ++--
 .../pages/demos/dividers/SubheaderDividers.js |  4 +-
 docs/src/pages/demos/drawers/ClippedDrawer.js |  2 +-
 .../pages/demos/drawers/MiniDrawer.hooks.js   |  6 +--
 docs/src/pages/demos/drawers/MiniDrawer.js    |  6 +--
 .../demos/drawers/PermanentDrawerLeft.js      |  2 +-
 .../demos/drawers/PermanentDrawerRight.js     |  2 +-
 .../drawers/PersistentDrawerLeft.hooks.js     |  2 +-
 .../demos/drawers/PersistentDrawerLeft.js     |  2 +-
 .../drawers/PersistentDrawerRight.hooks.js    |  2 +-
 .../demos/drawers/PersistentDrawerRight.js    |  2 +-
 .../demos/drawers/ResponsiveDrawer.hooks.js   |  2 +-
 .../pages/demos/drawers/ResponsiveDrawer.js   |  2 +-
 .../CustomizedExpansionPanel.js               |  2 +-
 .../DetailedExpansionPanel.js                 |  2 +-
 .../demos/lists/InteractiveList.hooks.js      |  2 +-
 docs/src/pages/demos/lists/InteractiveList.js |  2 +-
 .../src/pages/demos/lists/NestedList.hooks.js |  2 +-
 docs/src/pages/demos/lists/NestedList.js      |  2 +-
 .../demos/menus/MenuListComposition.hooks.js  |  2 +-
 .../pages/demos/menus/MenuListComposition.js  |  2 +-
 docs/src/pages/demos/paper/PaperSheet.js      |  4 +-
 .../pages/demos/pickers/DateAndTimePickers.js |  4 +-
 docs/src/pages/demos/pickers/DatePickers.js   |  4 +-
 docs/src/pages/demos/pickers/TimePickers.js   |  4 +-
 .../progress/CircularDeterminate.hooks.js     |  2 +-
 .../demos/progress/CircularDeterminate.js     |  2 +-
 .../demos/progress/CircularIndeterminate.js   |  2 +-
 .../progress/CircularIntegration.hooks.js     |  2 +-
 .../demos/progress/CircularIntegration.js     |  2 +-
 .../demos/progress/CircularStatic.hooks.js    |  2 +-
 .../pages/demos/progress/CircularStatic.js    |  2 +-
 .../demos/progress/CustomizedProgress.js      |  4 +-
 .../progress/DelayingAppearance.hooks.js      |  2 +-
 .../demos/progress/DelayingAppearance.js      |  2 +-
 .../CheckboxesGroup.hooks.js                  |  2 +-
 .../selection-controls/CheckboxesGroup.js     |  2 +-
 .../RadioButtonsGroup.hooks.js                |  4 +-
 .../selection-controls/RadioButtonsGroup.js   |  4 +-
 .../selects/ControlledOpenSelect.hooks.js     |  4 +-
 .../demos/selects/ControlledOpenSelect.js     |  4 +-
 .../pages/demos/selects/CustomizedSelects.js  |  4 +-
 .../pages/demos/selects/DialogSelect.hooks.js |  2 +-
 docs/src/pages/demos/selects/DialogSelect.js  |  2 +-
 .../demos/selects/MultipleSelect.hooks.js     |  6 +--
 .../src/pages/demos/selects/MultipleSelect.js |  6 +--
 .../demos/selects/NativeSelects.hooks.js      |  4 +-
 docs/src/pages/demos/selects/NativeSelects.js |  4 +-
 .../pages/demos/selects/SimpleSelect.hooks.js |  4 +-
 docs/src/pages/demos/selects/SimpleSelect.js  |  4 +-
 .../demos/snackbars/ConsecutiveSnackbars.js   |  2 +-
 .../snackbars/CustomizedSnackbars.hooks.js    |  4 +-
 .../demos/snackbars/CustomizedSnackbars.js    |  4 +-
 .../snackbars/FabIntegrationSnackbar.hooks.js |  6 +--
 .../demos/snackbars/FabIntegrationSnackbar.js |  6 +--
 .../pages/demos/snackbars/LongTextSnackbar.js |  2 +-
 .../demos/snackbars/SimpleSnackbar.hooks.js   |  2 +-
 .../pages/demos/snackbars/SimpleSnackbar.js   |  2 +-
 .../demos/steppers/CustomizedStepper.hooks.js |  6 +--
 .../pages/demos/steppers/CustomizedStepper.js |  6 +--
 ...ntalLinearAlternativeLabelStepper.hooks.js |  6 +--
 ...HorizontalLinearAlternativeLabelStepper.js |  6 +--
 .../steppers/HorizontalLinearStepper.hooks.js |  6 +--
 .../demos/steppers/HorizontalLinearStepper.js |  6 +--
 ...lNonLinearAlternativeLabelStepper.hooks.js |  8 ++--
 ...izontalNonLinearAlternativeLabelStepper.js |  8 ++--
 .../HorizontalNonLinearStepper.hooks.js       |  6 +--
 .../steppers/HorizontalNonLinearStepper.js    |  6 +--
 ...rizontalNonLinearStepperWithError.hooks.js |  6 +--
 .../HorizontalNonLinearStepperWithError.js    |  6 +--
 .../SwipeableTextMobileStepper.hooks.js       |  2 +-
 .../steppers/SwipeableTextMobileStepper.js    |  2 +-
 .../demos/steppers/TextMobileStepper.hooks.js |  2 +-
 .../pages/demos/steppers/TextMobileStepper.js |  2 +-
 .../steppers/VerticalLinearStepper.hooks.js   |  8 ++--
 .../demos/steppers/VerticalLinearStepper.js   |  8 ++--
 .../CustomPaginationActionsTable.hooks.js     |  4 +-
 .../tables/CustomPaginationActionsTable.js    |  4 +-
 .../src/pages/demos/tables/CustomizedTable.js |  2 +-
 .../pages/demos/tables/EnhancedTable.hooks.js |  4 +-
 docs/src/pages/demos/tables/EnhancedTable.js  |  4 +-
 docs/src/pages/demos/tables/SimpleTable.js    |  2 +-
 docs/src/pages/demos/tables/SpanningTable.js  |  2 +-
 .../pages/demos/tabs/CustomizedTabs.hooks.js  |  4 +-
 docs/src/pages/demos/tabs/CustomizedTabs.js   |  4 +-
 .../demos/text-fields/ComposedTextField.js    |  2 +-
 .../demos/text-fields/ComposedTextField.tsx   |  2 +-
 .../demos/text-fields/CustomizedInputs.js     |  4 +-
 .../demos/text-fields/CustomizedInputs.tsx    |  4 +-
 .../FilledInputAdornments.hooks.js            |  2 +-
 .../text-fields/FilledInputAdornments.js      |  2 +-
 .../text-fields/FilledInputAdornments.tsx     |  2 +-
 .../text-fields/FilledTextFields.hooks.js     |  4 +-
 .../demos/text-fields/FilledTextFields.js     |  4 +-
 .../demos/text-fields/FilledTextFields.tsx    |  4 +-
 .../text-fields/FormattedInputs.hooks.js      |  2 +-
 .../demos/text-fields/FormattedInputs.js      |  2 +-
 .../demos/text-fields/FormattedInputs.tsx     |  2 +-
 .../text-fields/InputAdornments.hooks.js      |  4 +-
 .../demos/text-fields/InputAdornments.js      |  4 +-
 .../demos/text-fields/InputAdornments.tsx     |  4 +-
 .../pages/demos/text-fields/InputWithIcon.js  |  2 +-
 .../pages/demos/text-fields/InputWithIcon.tsx |  4 +-
 docs/src/pages/demos/text-fields/Inputs.js    |  2 +-
 docs/src/pages/demos/text-fields/Inputs.tsx   |  2 +-
 .../OutlinedInputAdornments.hooks.js          |  2 +-
 .../text-fields/OutlinedInputAdornments.js    |  2 +-
 .../text-fields/OutlinedInputAdornments.tsx   |  2 +-
 .../text-fields/OutlinedTextFields.hooks.js   |  6 +--
 .../demos/text-fields/OutlinedTextFields.js   |  6 +--
 .../demos/text-fields/OutlinedTextFields.tsx  |  6 +--
 .../demos/text-fields/TextFieldMargins.js     |  4 +-
 .../demos/text-fields/TextFieldMargins.tsx    |  4 +-
 .../demos/text-fields/TextFields.hooks.js     |  4 +-
 .../src/pages/demos/text-fields/TextFields.js |  4 +-
 .../pages/demos/text-fields/TextFields.tsx    |  4 +-
 .../tooltips/CustomizedTooltips.hooks.js      |  2 +-
 .../demos/tooltips/CustomizedTooltips.js      |  2 +-
 .../demos/tooltips/InteractiveTooltips.js     |  2 +-
 .../pages/demos/tooltips/SimpleTooltips.js    |  6 +--
 .../src/pages/demos/tooltips/VariableWidth.js |  8 ++--
 .../pages/discover-more/showcase/Showcase.js  | 10 ++--
 docs/src/pages/discover-more/team/Team.js     | 10 ++--
 .../page-layout-examples/album/Album.js       | 16 +++----
 .../page-layout-examples/blog/Blog.js         | 22 ++++-----
 .../page-layout-examples/blog/Markdown.js     |  2 +-
 .../page-layout-examples/checkout/Checkout.js | 26 +++++-----
 .../page-layout-examples/checkout/Review.js   |  4 +-
 .../dashboard/Dashboard.js                    |  8 ++--
 .../page-layout-examples/pricing/Pricing.js   | 16 +++----
 .../page-layout-examples/sign-in/SignIn.js    | 16 +++----
 .../pages/guides/right-to-left/RtlOptOut.js   |  4 +-
 .../pages/lab/speed-dial/OpenIconSpeedDial.js |  4 +-
 .../lab/speed-dial/SpeedDialTooltipOpen.js    |  4 +-
 docs/src/pages/lab/speed-dial/SpeedDials.js   | 12 ++---
 .../pages/lab/toggle-button/ToggleButtons.js  |  4 +-
 .../pages/layout/breakpoints/MediaQuery.js    |  2 +-
 .../pages/layout/breakpoints/breakpoints.md   |  2 +-
 docs/src/pages/layout/grid/AutoGrid.js        |  2 +-
 docs/src/pages/layout/grid/AutoGridNoWrap.js  |  6 +--
 docs/src/pages/layout/grid/CSSGrid.js         |  8 ++--
 docs/src/pages/layout/grid/CenteredGrid.js    |  2 +-
 docs/src/pages/layout/grid/ComplexGrid.js     |  2 +-
 docs/src/pages/layout/grid/FullWidthGrid.js   |  2 +-
 docs/src/pages/layout/grid/InteractiveGrid.js |  4 +-
 docs/src/pages/layout/grid/NestedGrid.js      |  2 +-
 docs/src/pages/layout/grid/SpacingGrid.js     |  4 +-
 docs/src/pages/layout/grid/grid.md            |  7 ++-
 .../src/pages/layout/hidden/BreakpointDown.js |  4 +-
 .../src/pages/layout/hidden/BreakpointOnly.js |  4 +-
 docs/src/pages/layout/hidden/BreakpointUp.js  |  4 +-
 .../pages/layout/hidden/GridIntegration.js    |  2 +-
 .../theme/instapaper/components/button.js     |  4 +-
 .../theme/instapaper/components/icon.js       |  2 +-
 .../theme/instapaper/components/tabs.js       |  4 +-
 .../theme/instapaper/components/typography.js |  6 +--
 .../onepirate/ForgotPassword.js               |  8 ++--
 .../pages/premium-themes/onepirate/SignIn.js  |  8 ++--
 .../pages/premium-themes/onepirate/SignUp.js  |  8 ++--
 .../onepirate/modules/components/Button.js    |  6 +--
 .../modules/components/LayoutBody.js          | 24 +++++-----
 .../onepirate/modules/components/Markdown.js  |  2 +-
 .../onepirate/modules/components/Paper.js     |  2 +-
 .../onepirate/modules/components/Snackbar.js  |  6 +--
 .../onepirate/modules/components/TextField.js | 12 ++---
 .../modules/components/Typography.js          |  8 ++--
 .../onepirate/modules/form/FormFeedback.js    |  2 +-
 .../onepirate/modules/views/AppAppBar.js      |  2 +-
 .../onepirate/modules/views/AppFooter.js      | 12 ++---
 .../onepirate/modules/views/AppForm.js        |  4 +-
 .../onepirate/modules/views/ProductCTA.js     |  8 ++--
 .../modules/views/ProductCategories.js        |  8 ++--
 .../onepirate/modules/views/ProductHero.js    |  8 ++--
 .../modules/views/ProductHeroLayout.js        |  6 +--
 .../modules/views/ProductHowItWorks.js        | 14 +++---
 .../modules/views/ProductSmokingHero.js       | 10 ++--
 .../onepirate/modules/views/ProductValues.js  | 10 ++--
 .../pages/premium-themes/paperbase/Content.js |  2 +-
 .../pages/premium-themes/paperbase/Header.js  |  2 +-
 .../premium-themes/paperbase/Navigator.js     |  2 +-
 .../premium-themes/paperbase/Paperbase.js     |  4 +-
 .../tweeper/pages/tweeper/Profile.js          |  2 +-
 .../theme/tweeper/components/button.js        |  4 +-
 .../theme/tweeper/components/typography.js    |  4 +-
 docs/src/pages/style/color/Color.js           |  2 +-
 docs/src/pages/style/color/ColorDemo.js       |  6 +--
 docs/src/pages/style/color/ColorTool.js       | 12 ++---
 docs/src/pages/style/icons/FontAwesome.js     |  4 +-
 docs/src/pages/style/icons/Icons.js           |  4 +-
 docs/src/pages/style/icons/SvgIcons.js        |  4 +-
 .../src/pages/style/icons/SvgMaterialIcons.js |  2 +-
 docs/src/pages/style/links/Links.js           |  2 +-
 .../pages/style/typography/TypographyTheme.js |  2 +-
 .../utils/click-away-listener/ClickAway.js    |  6 +--
 docs/src/pages/utils/modal/SimpleModal.js     |  4 +-
 docs/src/pages/utils/no-ssr/SimpleNoSsr.js    |  2 +-
 .../pages/utils/popover/AnchorPlayground.js   |  4 +-
 .../pages/utils/popover/MouseOverPopover.js   |  2 +-
 .../pages/utils/popover/PopoverPopupState.js  |  2 +-
 .../pages/utils/popover/RenderPropsPopover.js |  2 +-
 docs/src/pages/utils/popover/SimplePopover.js |  2 +-
 .../utils/popper/FakedReferencePopper.js      |  2 +-
 .../pages/utils/popper/NoTransitionPopper.js  |  2 +-
 .../pages/utils/popper/PopperPopupState.js    |  2 +-
 .../pages/utils/popper/PositionedPopper.js    |  2 +-
 .../pages/utils/popper/RenderPropsPopper.js   |  2 +-
 .../pages/utils/popper/ScrollPlayground.js    |  4 +-
 docs/src/pages/utils/popper/SimplePopper.js   |  2 +-
 docs/src/pages/utils/portal/SimplePortal.js   |  4 +-
 .../pages/utils/transitions/SimpleCollapse.js |  2 +-
 .../src/pages/utils/transitions/SimpleFade.js |  2 +-
 .../src/pages/utils/transitions/SimpleGrow.js |  2 +-
 .../pages/utils/transitions/SimpleSlide.js    |  4 +-
 .../src/pages/utils/transitions/SimpleZoom.js |  2 +-
 examples/cdn-next/index.html                  |  4 +-
 .../src/pages/index.js                        |  2 +-
 .../src/pages/index.js                        |  2 +-
 .../src/pages/index.tsx                       |  2 +-
 examples/create-react-app/src/pages/index.js  |  2 +-
 examples/gatsby/src/pages/about.js            |  2 +-
 examples/gatsby/src/pages/index.js            |  2 +-
 .../pages/about.tsx                           |  2 +-
 .../pages/index.tsx                           |  2 +-
 examples/nextjs-hooks/pages/about.js          |  2 +-
 examples/nextjs-hooks/pages/index.js          |  2 +-
 examples/nextjs/pages/about.js                |  2 +-
 examples/nextjs/pages/index.js                |  2 +-
 examples/parcel/src/pages/index.js            |  2 +-
 examples/ssr/App.js                           |  2 +-
 .../src/ToggleButton/ToggleButton.js          |  2 +-
 .../material-ui-styles/test/styles.spec.tsx   | 10 ++--
 packages/material-ui-system/src/spacing.js    | 23 +++++----
 .../src/Breadcrumbs/BreadcrumbCollapsed.js    |  4 +-
 packages/material-ui/src/Divider/Divider.js   |  4 +-
 packages/material-ui/src/Grid/Grid.d.ts       |  2 +-
 packages/material-ui/src/Grid/Grid.js         | 13 +++--
 .../material-ui/src/styles/createMixins.d.ts  |  2 +-
 .../material-ui/src/styles/createMixins.js    |  8 ++--
 .../src/styles/createMuiTheme.d.ts            |  2 +-
 .../material-ui/src/styles/createMuiTheme.js  |  8 ++--
 .../src/styles/createMuiTheme.test.js         |  8 ++--
 .../material-ui/src/styles/createSpacing.d.ts |  5 ++
 .../material-ui/src/styles/createSpacing.js   | 48 +++++++++++++++++++
 .../src/styles/createSpacing.test.js          | 39 +++++++++++++++
 .../src/styles/createStyles.test.js           |  2 +-
 packages/material-ui/src/styles/spacing.d.ts  |  9 ----
 packages/material-ui/src/styles/spacing.js    |  7 ---
 .../material-ui/src/styles/withStyles.test.js |  2 +-
 .../test/typescript/components.spec.tsx       |  4 +-
 .../test/typescript/styles.spec.tsx           | 12 ++---
 .../typescript/stylingComparison.spec.tsx     |  2 +-
 pages/api/grid.md                             |  4 +-
 pages/index.js                                | 20 ++++----
 test/regressions/TestViewer.js                |  2 +-
 314 files changed, 874 insertions(+), 747 deletions(-)
 create mode 100644 packages/material-ui/src/styles/createSpacing.d.ts
 create mode 100644 packages/material-ui/src/styles/createSpacing.js
 create mode 100644 packages/material-ui/src/styles/createSpacing.test.js
 delete mode 100644 packages/material-ui/src/styles/spacing.d.ts
 delete mode 100644 packages/material-ui/src/styles/spacing.js

diff --git a/.size-limit.js b/.size-limit.js
index f37526ff32fe78..8ddeaa16e3b557 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -16,7 +16,7 @@ module.exports = [
     name: 'The initial cost paid for using one component',
     webpack: true,
     path: 'packages/material-ui/build/Paper/index.js',
-    limit: '18.7 KB',
+    limit: '18.8 KB',
   },
   {
     name: 'The initial cost paid for using one component with ES modules',
@@ -30,6 +30,12 @@ module.exports = [
     path: 'packages/material-ui/build/index.js',
     limit: '92.3 KB',
   },
+  {
+    name: 'The theme object',
+    webpack: true,
+    path: 'packages/material-ui/build/styles/createMuiTheme.js',
+    limit: '7 KB',
+  },
   {
     name: 'The size of the @material-ui/styles modules',
     webpack: true,
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
index e173c4c0896ab8..f7461a05ff2fa4 100644
--- a/docs/src/modules/components/Ad.js
+++ b/docs/src/modules/components/Ad.js
@@ -15,19 +15,19 @@ const styles = theme => ({
     minHeight: 116,
     maxWidth: 345,
     display: 'block',
-    marginTop: theme.spacing.unit * 4,
-    marginBottom: theme.spacing.unit * 3,
+    marginTop: theme.spacing(4),
+    marginBottom: theme.spacing(3),
   },
   info: {
     ...theme.typography.caption,
     position: 'absolute',
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
     cursor: 'default',
     bottom: 0,
     right: 0,
   },
   paper: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
     display: 'block',
   },
 });
diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js
index a736f0d64e0025..39d582638afc57 100644
--- a/docs/src/modules/components/AppContent.js
+++ b/docs/src/modules/components/AppContent.js
@@ -9,16 +9,16 @@ const styles = theme => ({
     flex: '1 1 100%',
     maxWidth: '100%',
     margin: '0 auto',
-    paddingLeft: theme.spacing.unit * 2,
-    paddingRight: theme.spacing.unit * 2,
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
-      paddingLeft: theme.spacing.unit * 4,
-      paddingRight: theme.spacing.unit * 4,
+      paddingLeft: theme.spacing(4),
+      paddingRight: theme.spacing(4),
       maxWidth: 'calc(100% - 167px)',
     },
     [theme.breakpoints.up('lg')]: {
-      paddingLeft: theme.spacing.unit * 5,
-      paddingRight: theme.spacing.unit * 9,
+      paddingLeft: theme.spacing(5),
+      paddingRight: theme.spacing(9),
       maxWidth: 'calc(100% - 240px - 167px)',
     },
   },
diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
index e2bca910e967d3..b71303e953b9b4 100644
--- a/docs/src/modules/components/AppDrawer.js
+++ b/docs/src/modules/components/AppDrawer.js
@@ -19,7 +19,7 @@ const styles = theme => ({
   },
   title: {
     color: theme.palette.text.secondary,
-    marginBottom: theme.spacing.unit / 2,
+    marginBottom: 4,
     '&:hover': {
       color: theme.palette.primary.main,
     },
@@ -30,7 +30,7 @@ const styles = theme => ({
   },
   toolbar: {
     ...theme.mixins.toolbar,
-    paddingLeft: theme.spacing.unit * 3,
+    paddingLeft: theme.spacing(3),
     display: 'flex',
     flexGrow: 1,
     flexDirection: 'column',
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index f16941d1f866fe..9193b34ce040f1 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -125,8 +125,8 @@ const styles = theme => ({
   root: {
     fontFamily: theme.typography.fontFamily,
     position: 'relative',
-    marginRight: theme.spacing.unit * 2,
-    marginLeft: theme.spacing.unit,
+    marginRight: theme.spacing(2),
+    marginLeft: theme.spacing(1),
     borderRadius: theme.shape.borderRadius,
     backgroundColor: fade(theme.palette.common.white, 0.15),
     '&:hover': {
@@ -141,7 +141,7 @@ const styles = theme => ({
     },
   },
   search: {
-    width: theme.spacing.unit * 9,
+    width: theme.spacing(9),
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
@@ -153,8 +153,9 @@ const styles = theme => ({
     color: 'inherit',
   },
   inputInput: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme
-      .spacing.unit * 9}px`,
+    padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
+      9,
+    )}px`,
   },
 });
 
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index a3dd8c74cc3a12..97142ee0f9d201 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -55,15 +55,14 @@ const styles = theme => ({
     wordBreak: 'break-word',
     height: 'calc(100vh - 70px)',
     overflowY: 'auto',
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px ${theme.spacing.unit *
-      2}px 5px`,
+    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px ${theme.spacing(2)}px 5px`,
     display: 'none',
     [theme.breakpoints.up('sm')]: {
       display: 'block',
     },
   },
   contents: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
   ul: {
     padding: 0,
@@ -72,7 +71,7 @@ const styles = theme => ({
   },
   item: {
     fontSize: 13,
-    padding: `${theme.spacing.unit / 2}px 0`,
+    padding: `${theme.spacing(0.5)}px 0`,
   },
 });
 
diff --git a/docs/src/modules/components/AppTheme.js b/docs/src/modules/components/AppTheme.js
index fdc118f048cc24..f6f8a3f2e8bba0 100644
--- a/docs/src/modules/components/AppTheme.js
+++ b/docs/src/modules/components/AppTheme.js
@@ -8,8 +8,8 @@ import Head from 'docs/src/modules/components/Head';
 
 const styles = theme => ({
   credit: {
-    marginTop: theme.spacing.unit * 6,
-    marginBottom: theme.spacing.unit * 4,
+    marginTop: theme.spacing(6),
+    marginBottom: theme.spacing(4),
   },
   hideCredit: {
     position: 'absolute',
diff --git a/docs/src/modules/components/Carbon.js b/docs/src/modules/components/Carbon.js
index f6fb01670daadb..0c5e5de6844c60 100644
--- a/docs/src/modules/components/Carbon.js
+++ b/docs/src/modules/components/Carbon.js
@@ -7,13 +7,14 @@ const styles = theme => ({
     '#carbonads': {
       overflow: 'hidden',
       backgroundColor: theme.palette.background.paper,
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme
-        .spacing.unit + 130}px`,
+      padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
+        1,
+      ) + 130}px`,
       borderRadius: theme.shape.borderRadius,
       '& .carbon-img': {
         float: 'left',
         marginLeft: -130,
-        marginRight: theme.spacing.unit,
+        marginRight: theme.spacing(1),
       },
       '& img': {
         verticalAlign: 'middle',
diff --git a/docs/src/modules/components/CodeFund.js b/docs/src/modules/components/CodeFund.js
index c5e3b3be90d163..fd59688936e2da 100644
--- a/docs/src/modules/components/CodeFund.js
+++ b/docs/src/modules/components/CodeFund.js
@@ -7,13 +7,14 @@ const styles = theme => ({
     '#cf': {
       overflow: 'hidden',
       backgroundColor: theme.palette.background.paper,
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme
-        .spacing.unit + 130}px`,
+      padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
+        1,
+      ) + 130}px`,
       borderRadius: theme.shape.borderRadius,
       '& .cf-img-wrapper.cf-img-wrapper': {
         float: 'left',
         marginLeft: -130,
-        marginRight: theme.spacing.unit,
+        marginRight: theme.spacing(1),
       },
       '& img': {
         verticalAlign: 'middle',
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 013f512ca8be03..fb2420e498ca8c 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -40,10 +40,10 @@ const styles = theme => ({
   root: {
     position: 'relative',
     marginBottom: 40,
-    marginLeft: -theme.spacing.unit * 2,
-    marginRight: -theme.spacing.unit * 2,
+    marginLeft: -theme.spacing(2),
+    marginRight: -theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
-      padding: `0 ${theme.spacing.unit}px`,
+      padding: `0 ${theme.spacing(1)}px`,
       marginLeft: 0,
       marginRight: 0,
     },
@@ -56,13 +56,13 @@ const styles = theme => ({
     justifyContent: 'center',
     padding: 20,
     [theme.breakpoints.up('sm')]: {
-      padding: theme.spacing.unit * 3,
+      padding: theme.spacing(3),
     },
   },
   demoHiddenHeader: {
-    paddingTop: theme.spacing.unit * 2,
+    paddingTop: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
-      paddingTop: theme.spacing.unit * 3,
+      paddingTop: theme.spacing(3),
     },
   },
   header: {
@@ -71,7 +71,7 @@ const styles = theme => ({
       display: 'flex',
       flip: false,
       top: 0,
-      right: theme.spacing.unit,
+      right: theme.spacing(1),
     },
     justifyContent: 'space-between',
   },
@@ -84,7 +84,7 @@ const styles = theme => ({
     },
     '& pre': {
       overflow: 'auto',
-      paddingTop: theme.spacing.unit * 5,
+      paddingTop: theme.spacing(5),
       margin: '0px !important',
       borderRadius: '0px !important',
     },
diff --git a/docs/src/modules/components/HomeBackers.js b/docs/src/modules/components/HomeBackers.js
index 1792e93b5f2ed2..789feb81ca98c0 100644
--- a/docs/src/modules/components/HomeBackers.js
+++ b/docs/src/modules/components/HomeBackers.js
@@ -16,9 +16,9 @@ const styles = theme => ({
     minHeight: 600,
   },
   markdownElement: {
-    maxWidth: theme.spacing.unit * 110,
+    maxWidth: theme.spacing(110),
     margin: 'auto',
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js
index d2cdf5b009f313..af25eaf3cf5194 100644
--- a/docs/src/modules/components/HomeFooter.js
+++ b/docs/src/modules/components/HomeFooter.js
@@ -9,11 +9,11 @@ import Link from 'docs/src/modules/components/Link';
 
 const styles = theme => ({
   root: {
-    maxWidth: theme.spacing.unit * 110,
+    maxWidth: theme.spacing(110),
     margin: 'auto',
-    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
+    padding: `${theme.spacing(3)}px ${theme.spacing(2)}px`,
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing.unit * 6}px ${theme.spacing.unit * 2}px`,
+      padding: `${theme.spacing(6)}px ${theme.spacing(2)}px`,
     },
   },
   list: {
@@ -22,11 +22,11 @@ const styles = theme => ({
     listStyle: 'none',
   },
   listItem: {
-    paddingTop: theme.spacing.unit / 2,
-    paddingBottom: theme.spacing.unit / 2,
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
   },
   version: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
index 9ffcd42017a15f..792278457e91f0 100644
--- a/docs/src/modules/components/HomeSteps.js
+++ b/docs/src/modules/components/HomeSteps.js
@@ -18,11 +18,11 @@ import Link from 'docs/src/modules/components/Link';
 const styles = theme => ({
   step: {
     border: `12px solid ${theme.palette.background.paper}`,
-    padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
+    padding: `${theme.spacing(3)}px ${theme.spacing(2)}px`,
     borderRightWidth: 0,
     borderLeftWidth: 0,
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing.unit * 5}px ${theme.spacing.unit * 4}px`,
+      padding: `${theme.spacing(5)}px ${theme.spacing(4)}px`,
     },
     [theme.breakpoints.up('md')]: {
       borderRightWidth: 12,
@@ -45,33 +45,33 @@ const styles = theme => ({
   },
   stepTitle: {
     display: 'flex',
-    marginBottom: theme.spacing.unit * 3,
+    marginBottom: theme.spacing(3),
     alignItems: 'center',
   },
   stepIcon: {
     color: theme.palette.primary.dark,
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
     fontSize: 30,
   },
   stepBody: {
     minHeight: 270,
   },
   markdownElement: {
-    maxWidth: `calc(100vw - ${(theme.spacing.unit * 5 + 1) * 2}px)`,
+    maxWidth: `calc(100vw - ${(theme.spacing(5) + 1) * 2}px)`,
     '& pre, & pre[class*="language-"], & code': {
       backgroundColor: 'transparent',
     },
     '& pre, & pre[class*="language-"]': {
-      padding: theme.spacing.unit,
+      padding: theme.spacing(1),
       margin: 0,
     },
   },
   divider: {
-    marginTop: theme.spacing.unit * 4,
-    marginBottom: theme.spacing.unit * 2,
+    marginTop: theme.spacing(4),
+    marginBottom: theme.spacing(2),
   },
   link: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
     display: 'block',
   },
   img: {
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index de34848a5f7b9d..2abb630b8d9d2f 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -32,9 +32,9 @@ const styles = theme => ({
     alignItems: 'flex-end',
   },
   markdownElement: {
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    padding: `0 ${theme.spacing.unit}px`,
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    padding: `0 ${theme.spacing(1)}px`,
   },
 });
 
diff --git a/docs/src/modules/components/Tidelift.js b/docs/src/modules/components/Tidelift.js
index fb148de49e06ea..85086f8558137c 100644
--- a/docs/src/modules/components/Tidelift.js
+++ b/docs/src/modules/components/Tidelift.js
@@ -9,8 +9,9 @@ import compose from 'recompose/compose';
 
 const styles = theme => ({
   root: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme
-      .spacing.unit * 2}px`,
+    padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
+      2,
+    )}px`,
     right: 0,
     left: 0,
     display: 'flex',
@@ -31,7 +32,7 @@ const styles = theme => ({
     content: '""',
     width: 20,
     height: 20,
-    margin: `0 ${theme.spacing.unit}px 0 0`,
+    margin: `0 ${theme.spacing(1)}px 0 0`,
   },
 });
 
diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js
index 184ab5c84671a3..22572a3fa43a23 100644
--- a/docs/src/pages/customization/default-theme/DefaultTheme.js
+++ b/docs/src/pages/customization/default-theme/DefaultTheme.js
@@ -10,15 +10,15 @@ import Switch from '@material-ui/core/Switch';
 
 const styles = theme => ({
   root: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     paddingTop: 0,
     // Match <Inspector /> default theme.
     backgroundColor: theme.palette.type === 'light' ? theme.palette.common.white : '#242424',
-    minHeight: theme.spacing.unit * 40,
+    minHeight: theme.spacing(40),
     width: '100%',
   },
   switch: {
-    paddingBottom: theme.spacing.unit,
+    paddingBottom: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/customization/themes/WithTheme.js b/docs/src/pages/customization/themes/WithTheme.js
index 0fdf1159acca09..cb8727d553ecb5 100644
--- a/docs/src/pages/customization/themes/WithTheme.js
+++ b/docs/src/pages/customization/themes/WithTheme.js
@@ -11,12 +11,12 @@ function WithTheme(props) {
   const styles = {
     primaryText: {
       backgroundColor: theme.palette.background.default,
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+      padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
       color: primaryText,
     },
     primaryColor: {
       backgroundColor: primaryColor,
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+      padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
       color: theme.palette.common.white,
     },
   };
diff --git a/docs/src/pages/customization/themes/themes.md b/docs/src/pages/customization/themes/themes.md
index 7e6eb0834e92f5..0f7a3aacf4629c 100644
--- a/docs/src/pages/customization/themes/themes.md
+++ b/docs/src/pages/customization/themes/themes.md
@@ -25,6 +25,7 @@ The following sections cover the most important theme variables:
 - [Palette](#palette)
 - [Type (light / dark theme)](#type-light-dark-theme)
 - [Typography](#typography)
+- [Spacing](#spacing)
 - [Other variables](#other-variables)
 - [Custom variables](#custom-variables)
 
@@ -215,7 +216,7 @@ If you want to learn more about typography, you can check out [the typography se
 
 {{"demo": "pages/customization/themes/TypographyTheme.js"}}
 
-### Typography - Font family
+#### Typography - Font family
 
 ```js
 const theme = createMuiTheme({
@@ -237,7 +238,7 @@ const theme = createMuiTheme({
 });
 ```
 
-### Typography - Font size
+#### Typography - Font size
 
 Material-UI uses `rem` units for the font size.
 The browser `<html>` element default font size is `16px`, but browsers have an option to change this value,
@@ -262,7 +263,7 @@ The computed font size by the browser follows this mathematical equation:
 ![font-size](/static/images/font-size.gif)
 <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
 
-### Typography - HTML font size
+#### Typography - HTML font size
 
 You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/).
 We provide a `htmlFontSize` theme property for this use case.
@@ -288,6 +289,42 @@ html {
 
 {{"demo": "pages/customization/themes/FontSizeTheme.js"}}
 
+### Spacing
+
+We encourage you to use the `theme.spacing()` helper to create consistent spacing between the elements of your UI.
+Material-UI uses [a recommended 8px scaling factor by default](https://material.io/design/layout/understanding-layout.html).
+
+```js
+const styles = theme => ({
+  root: {
+    // JSS uses px as the default units for this CSS property.
+    padding: theme.spacing(2), // Outputs 8 * 2
+  },
+});
+```
+
+You can change the spacing transformation by providing:
+
+- a number
+
+```js
+const theme = createMuiTheme({
+  spacing: 4,
+});
+
+theme.spacing(2) // = 4 * 2
+```
+
+- or a function
+
+```js
+const theme = createMuiTheme({
+  spacing: x => `${0.25 * x}rem`, // (Bootstrap strategy)
+});
+
+theme.spacing(2) // = 0.5rem = 8px
+```
+
 ### Other variables
 
 In addition to the palette, dark and light types, and typography, the theme normalizes implementation by providing many more default values, such as breakpoints, shadows, transitions, etc.
diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.js b/docs/src/pages/demos/app-bar/BottomAppBar.js
index b11be93f1ee669..6c739f97285a43 100644
--- a/docs/src/pages/demos/app-bar/BottomAppBar.js
+++ b/docs/src/pages/demos/app-bar/BottomAppBar.js
@@ -20,15 +20,15 @@ import MoreIcon from '@material-ui/icons/MoreVert';
 
 const styles = theme => ({
   text: {
-    paddingTop: theme.spacing.unit * 2,
-    paddingLeft: theme.spacing.unit * 2,
-    paddingRight: theme.spacing.unit * 2,
+    paddingTop: theme.spacing(2),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
   },
   paper: {
     paddingBottom: 50,
   },
   list: {
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing(2),
   },
   subHeader: {
     backgroundColor: theme.palette.background.paper,
diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.tsx b/docs/src/pages/demos/app-bar/BottomAppBar.tsx
index f2b34cc86143ff..04bc848dd61508 100644
--- a/docs/src/pages/demos/app-bar/BottomAppBar.tsx
+++ b/docs/src/pages/demos/app-bar/BottomAppBar.tsx
@@ -21,15 +21,15 @@ import MoreIcon from '@material-ui/icons/MoreVert';
 const styles = (theme: Theme) =>
   createStyles({
     text: {
-      paddingTop: theme.spacing.unit * 2,
-      paddingLeft: theme.spacing.unit * 2,
-      paddingRight: theme.spacing.unit * 2,
+      paddingTop: theme.spacing(2),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
     },
     paper: {
       paddingBottom: 50,
     },
     list: {
-      marginBottom: theme.spacing.unit * 2,
+      marginBottom: theme.spacing(2),
     },
     subHeader: {
       backgroundColor: theme.palette.background.paper,
diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js
index 2a85217c5d466c..e063b6029d38c5 100644
--- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js
+++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.hooks.js
@@ -40,16 +40,16 @@ const useStyles = makeStyles(theme => ({
     '&:hover': {
       backgroundColor: fade(theme.palette.common.white, 0.25),
     },
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
     marginLeft: 0,
     width: '100%',
     [theme.breakpoints.up('sm')]: {
-      marginLeft: theme.spacing.unit * 3,
+      marginLeft: theme.spacing(3),
       width: 'auto',
     },
   },
   searchIcon: {
-    width: theme.spacing.unit * 9,
+    width: theme.spacing(9),
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
@@ -62,10 +62,10 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
   },
   inputInput: {
-    paddingTop: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
-    paddingLeft: theme.spacing.unit * 10,
+    paddingTop: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(10),
     transition: theme.transitions.create('width'),
     width: '100%',
     [theme.breakpoints.up('md')]: {
diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.js b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.js
index 936edacf13aba5..39ae75563ff4cd 100644
--- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.js
+++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.js
@@ -41,16 +41,16 @@ const styles = theme => ({
     '&:hover': {
       backgroundColor: fade(theme.palette.common.white, 0.25),
     },
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
     marginLeft: 0,
     width: '100%',
     [theme.breakpoints.up('sm')]: {
-      marginLeft: theme.spacing.unit * 3,
+      marginLeft: theme.spacing(3),
       width: 'auto',
     },
   },
   searchIcon: {
-    width: theme.spacing.unit * 9,
+    width: theme.spacing(9),
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
@@ -63,10 +63,10 @@ const styles = theme => ({
     width: '100%',
   },
   inputInput: {
-    paddingTop: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
-    paddingLeft: theme.spacing.unit * 10,
+    paddingTop: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(10),
     transition: theme.transitions.create('width'),
     width: '100%',
     [theme.breakpoints.up('md')]: {
diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.tsx b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.tsx
index 56ee618b011979..d847cd2a4febb5 100644
--- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar.tsx
+++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar.tsx
@@ -42,16 +42,16 @@ const styles = (theme: Theme) =>
       '&:hover': {
         backgroundColor: fade(theme.palette.common.white, 0.25),
       },
-      marginRight: theme.spacing.unit * 2,
+      marginRight: theme.spacing(2),
       marginLeft: 0,
       width: '100%',
       [theme.breakpoints.up('sm')]: {
-        marginLeft: theme.spacing.unit * 3,
+        marginLeft: theme.spacing(3),
         width: 'auto',
       },
     },
     searchIcon: {
-      width: theme.spacing.unit * 9,
+      width: theme.spacing(9),
       height: '100%',
       position: 'absolute',
       pointerEvents: 'none',
@@ -64,10 +64,10 @@ const styles = (theme: Theme) =>
       width: '100%',
     },
     inputInput: {
-      paddingTop: theme.spacing.unit,
-      paddingRight: theme.spacing.unit,
-      paddingBottom: theme.spacing.unit,
-      paddingLeft: theme.spacing.unit * 10,
+      paddingTop: theme.spacing(1),
+      paddingRight: theme.spacing(1),
+      paddingBottom: theme.spacing(1),
+      paddingLeft: theme.spacing(10),
       transition: theme.transitions.create('width'),
       width: '100%',
       [theme.breakpoints.up('md')]: {
diff --git a/docs/src/pages/demos/app-bar/SearchAppBar.js b/docs/src/pages/demos/app-bar/SearchAppBar.js
index 9d19f036b7acd7..7d9dd0071c1321 100644
--- a/docs/src/pages/demos/app-bar/SearchAppBar.js
+++ b/docs/src/pages/demos/app-bar/SearchAppBar.js
@@ -37,12 +37,12 @@ const styles = theme => ({
     marginLeft: 0,
     width: '100%',
     [theme.breakpoints.up('sm')]: {
-      marginLeft: theme.spacing.unit,
+      marginLeft: theme.spacing(1),
       width: 'auto',
     },
   },
   searchIcon: {
-    width: theme.spacing.unit * 9,
+    width: theme.spacing(9),
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
@@ -55,10 +55,10 @@ const styles = theme => ({
     width: '100%',
   },
   inputInput: {
-    paddingTop: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
-    paddingLeft: theme.spacing.unit * 10,
+    paddingTop: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(10),
     transition: theme.transitions.create('width'),
     width: '100%',
     [theme.breakpoints.up('sm')]: {
diff --git a/docs/src/pages/demos/app-bar/SearchAppBar.tsx b/docs/src/pages/demos/app-bar/SearchAppBar.tsx
index 488d6d57c8c22a..fdd9bb71c58f3a 100644
--- a/docs/src/pages/demos/app-bar/SearchAppBar.tsx
+++ b/docs/src/pages/demos/app-bar/SearchAppBar.tsx
@@ -38,12 +38,12 @@ const styles = (theme: Theme) =>
       marginLeft: 0,
       width: '100%',
       [theme.breakpoints.up('sm')]: {
-        marginLeft: theme.spacing.unit,
+        marginLeft: theme.spacing(1),
         width: 'auto',
       },
     },
     searchIcon: {
-      width: theme.spacing.unit * 9,
+      width: theme.spacing(9),
       height: '100%',
       position: 'absolute',
       pointerEvents: 'none',
@@ -56,10 +56,10 @@ const styles = (theme: Theme) =>
       width: '100%',
     },
     inputInput: {
-      paddingTop: theme.spacing.unit,
-      paddingRight: theme.spacing.unit,
-      paddingBottom: theme.spacing.unit,
-      paddingLeft: theme.spacing.unit * 10,
+      paddingTop: theme.spacing(1),
+      paddingRight: theme.spacing(1),
+      paddingBottom: theme.spacing(1),
+      paddingLeft: theme.spacing(10),
       transition: theme.transitions.create('width'),
       width: '100%',
       [theme.breakpoints.up('sm')]: {
diff --git a/docs/src/pages/demos/autocomplete/IntegrationAutosuggest.js b/docs/src/pages/demos/autocomplete/IntegrationAutosuggest.js
index 1c848d920cdc2c..4e6580730bfdef 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationAutosuggest.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationAutosuggest.js
@@ -124,7 +124,7 @@ const styles = theme => ({
   suggestionsContainerOpen: {
     position: 'absolute',
     zIndex: 1,
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
     left: 0,
     right: 0,
   },
@@ -137,7 +137,7 @@ const styles = theme => ({
     listStyleType: 'none',
   },
   divider: {
-    height: theme.spacing.unit * 2,
+    height: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js
index 1b7829c8830901..9b6510888e3283 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js
@@ -209,12 +209,12 @@ const useStyles = makeStyles(theme => ({
   paper: {
     position: 'absolute',
     zIndex: 1,
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
     left: 0,
     right: 0,
   },
   chip: {
-    margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
+    margin: `${theme.spacing(0.5)}px ${2}px`,
   },
   inputRoot: {
     flexWrap: 'wrap',
@@ -224,7 +224,7 @@ const useStyles = makeStyles(theme => ({
     flexGrow: 1,
   },
   divider: {
-    height: theme.spacing.unit * 2,
+    height: theme.spacing(2),
   },
 }));
 
diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
index 71cc1bbeb3b3eb..44fe885c47c426 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
@@ -224,12 +224,12 @@ const styles = theme => ({
   paper: {
     position: 'absolute',
     zIndex: 1,
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
     left: 0,
     right: 0,
   },
   chip: {
-    margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
+    margin: `${theme.spacing(0.5)}px ${2}px`,
   },
   inputRoot: {
     flexWrap: 'wrap',
@@ -239,7 +239,7 @@ const styles = theme => ({
     flexGrow: 1,
   },
   divider: {
-    height: theme.spacing.unit * 2,
+    height: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js
index 34a11af28b7d0b..0af576673065cf 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js
@@ -70,7 +70,7 @@ const useStyles = makeStyles(theme => ({
     overflow: 'hidden',
   },
   chip: {
-    margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
+    margin: `${theme.spacing(0.5)}px ${2}px`,
   },
   chipFocused: {
     backgroundColor: emphasize(
@@ -79,7 +79,7 @@ const useStyles = makeStyles(theme => ({
     ),
   },
   noOptionsMessage: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
   },
   singleValue: {
     fontSize: 16,
@@ -92,12 +92,12 @@ const useStyles = makeStyles(theme => ({
   paper: {
     position: 'absolute',
     zIndex: 1,
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
     left: 0,
     right: 0,
   },
   divider: {
-    height: theme.spacing.unit * 2,
+    height: theme.spacing(2),
   },
 }));
 
diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
index 2865cffee904bf..b1446aa6754d3e 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
@@ -71,7 +71,7 @@ const styles = theme => ({
     overflow: 'hidden',
   },
   chip: {
-    margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
+    margin: `${theme.spacing(0.5)}px ${2}px`,
   },
   chipFocused: {
     backgroundColor: emphasize(
@@ -80,7 +80,7 @@ const styles = theme => ({
     ),
   },
   noOptionsMessage: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
   },
   singleValue: {
     fontSize: 16,
@@ -93,12 +93,12 @@ const styles = theme => ({
   paper: {
     position: 'absolute',
     zIndex: 1,
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
     left: 0,
     right: 0,
   },
   divider: {
-    height: theme.spacing.unit * 2,
+    height: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/badges/BadgeMax.js b/docs/src/pages/demos/badges/BadgeMax.js
index a1b211d2312071..660d0801682069 100644
--- a/docs/src/pages/demos/badges/BadgeMax.js
+++ b/docs/src/pages/demos/badges/BadgeMax.js
@@ -6,8 +6,8 @@ import MailIcon from '@material-ui/icons/Mail';
 
 const styles = theme => ({
   margin: {
-    margin: theme.spacing.unit * 2,
-    marginRight: theme.spacing.unit * 3,
+    margin: theme.spacing(2),
+    marginRight: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/demos/badges/BadgeVisibility.hooks.js b/docs/src/pages/demos/badges/BadgeVisibility.hooks.js
index 35b8763035a952..baeb90e755e508 100644
--- a/docs/src/pages/demos/badges/BadgeVisibility.hooks.js
+++ b/docs/src/pages/demos/badges/BadgeVisibility.hooks.js
@@ -15,13 +15,13 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
   },
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   divider: {
     width: '100%',
   },
   row: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 }));
 
diff --git a/docs/src/pages/demos/badges/BadgeVisibility.js b/docs/src/pages/demos/badges/BadgeVisibility.js
index 2683a9b7451c30..2a341d86f8f4be 100644
--- a/docs/src/pages/demos/badges/BadgeVisibility.js
+++ b/docs/src/pages/demos/badges/BadgeVisibility.js
@@ -16,13 +16,13 @@ const styles = theme => ({
     width: '100%',
   },
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   divider: {
     width: '100%',
   },
   row: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/badges/DotBadge.js b/docs/src/pages/demos/badges/DotBadge.js
index e8dc33fcd3929e..8ce25bb24ab5e7 100644
--- a/docs/src/pages/demos/badges/DotBadge.js
+++ b/docs/src/pages/demos/badges/DotBadge.js
@@ -7,7 +7,7 @@ import Typography from '@material-ui/core/Typography';
 
 const styles = theme => ({
   margin: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/badges/SimpleBadge.js b/docs/src/pages/demos/badges/SimpleBadge.js
index 99f73f0f6634b2..058735384cd3ef 100644
--- a/docs/src/pages/demos/badges/SimpleBadge.js
+++ b/docs/src/pages/demos/badges/SimpleBadge.js
@@ -12,10 +12,10 @@ import Button from '@material-ui/core/Button';
 
 const styles = theme => ({
   margin: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
   padding: {
-    padding: `0 ${theme.spacing.unit * 2}px`,
+    padding: `0 ${theme.spacing(2)}px`,
   },
 });
 
diff --git a/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js
index b61036208eb64c..1fa77e5d19ee40 100644
--- a/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js
+++ b/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js
@@ -14,7 +14,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   paper: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
   },
 });
 
diff --git a/docs/src/pages/demos/breadcrumbs/CustomSeparator.js b/docs/src/pages/demos/breadcrumbs/CustomSeparator.js
index b94e1b3292f4cc..ca53af9a1b97bf 100644
--- a/docs/src/pages/demos/breadcrumbs/CustomSeparator.js
+++ b/docs/src/pages/demos/breadcrumbs/CustomSeparator.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   paper: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
   },
 });
 
diff --git a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js
index 72be28313bb359..7b59f3dcb7c015 100644
--- a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js
+++ b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js
@@ -11,7 +11,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
 const styles = theme => ({
   root: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
   },
   chip: {
     backgroundColor: theme.palette.grey[100],
@@ -28,7 +28,7 @@ const styles = theme => ({
   },
   avatar: {
     background: 'none',
-    marginRight: -theme.spacing.unit * 1.5,
+    marginRight: -theme.spacing(1.5),
   },
 });
 
diff --git a/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js
index e07c31b9dbd750..a6f8c91021abd2 100644
--- a/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js
+++ b/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js
@@ -11,13 +11,13 @@ import GrainIcon from '@material-ui/icons/Grain';
 
 const styles = theme => ({
   root: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
   },
   link: {
     display: 'flex',
   },
   icon: {
-    marginRight: theme.spacing.unit / 2,
+    marginRight: theme.spacing(0.5),
     width: 20,
     height: 20,
   },
diff --git a/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js
index ff76baab50bd7a..93095758243707 100644
--- a/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js
+++ b/docs/src/pages/demos/breadcrumbs/RouterBreadcrumbs.js
@@ -52,10 +52,10 @@ const styles = theme => ({
   },
   lists: {
     backgroundColor: theme.palette.background.paper,
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
   },
   nested: {
-    paddingLeft: theme.spacing.unit * 4,
+    paddingLeft: theme.spacing(4),
   },
 });
 
diff --git a/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js
index 669028fc8e751d..e982388ffb05d9 100644
--- a/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js
+++ b/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js
@@ -12,7 +12,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   paper: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
   },
 });
 
diff --git a/docs/src/pages/demos/buttons/ButtonBases.js b/docs/src/pages/demos/buttons/ButtonBases.js
index 0093246770f4b5..e832dd6f46c75f 100644
--- a/docs/src/pages/demos/buttons/ButtonBases.js
+++ b/docs/src/pages/demos/buttons/ButtonBases.js
@@ -64,7 +64,7 @@ const styles = theme => ({
   },
   imageTitle: {
     position: 'relative',
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 4}px ${theme.spacing.unit + 6}px`,
+    padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`,
   },
   imageMarked: {
     height: 3,
diff --git a/docs/src/pages/demos/buttons/ButtonSizes.js b/docs/src/pages/demos/buttons/ButtonSizes.js
index 912c059da3145d..ac9047920f8fb9 100644
--- a/docs/src/pages/demos/buttons/ButtonSizes.js
+++ b/docs/src/pages/demos/buttons/ButtonSizes.js
@@ -10,10 +10,10 @@ import NavigationIcon from '@material-ui/icons/Navigation';
 
 const styles = theme => ({
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   extendedIcon: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/buttons/ContainedButtons.js b/docs/src/pages/demos/buttons/ContainedButtons.js
index 2dfc20ffdb5d7e..7f659c026ec4bf 100644
--- a/docs/src/pages/demos/buttons/ContainedButtons.js
+++ b/docs/src/pages/demos/buttons/ContainedButtons.js
@@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button';
 
 const styles = theme => ({
   button: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   input: {
     display: 'none',
diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js
index 92b9e9e54d4c17..058b4b1feece30 100644
--- a/docs/src/pages/demos/buttons/CustomizedButtons.js
+++ b/docs/src/pages/demos/buttons/CustomizedButtons.js
@@ -8,7 +8,7 @@ import green from '@material-ui/core/colors/green';
 
 const styles = theme => ({
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   cssRoot: {
     color: theme.palette.getContrastText(purple[500]),
diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js
index aff0946fb0c448..31c786c17eec2c 100644
--- a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js
+++ b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js
@@ -38,8 +38,8 @@ const useStyles = makeStyles(theme => ({
   },
   fab: {
     position: 'absolute',
-    bottom: theme.spacing.unit * 2,
-    right: theme.spacing.unit * 2,
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
   },
   fabGreen: {
     color: theme.palette.common.white,
diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js
index 68306ac3bf83d7..a9be95c06e1323 100644
--- a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js
+++ b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js
@@ -38,8 +38,8 @@ const styles = theme => ({
   },
   fab: {
     position: 'absolute',
-    bottom: theme.spacing.unit * 2,
-    right: theme.spacing.unit * 2,
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
   },
   fabGreen: {
     color: theme.palette.common.white,
diff --git a/docs/src/pages/demos/buttons/FloatingActionButtons.js b/docs/src/pages/demos/buttons/FloatingActionButtons.js
index ef5e639f3ccae1..72a29573f4765f 100644
--- a/docs/src/pages/demos/buttons/FloatingActionButtons.js
+++ b/docs/src/pages/demos/buttons/FloatingActionButtons.js
@@ -9,10 +9,10 @@ import NavigationIcon from '@material-ui/icons/Navigation';
 
 const styles = theme => ({
   fab: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   extendedIcon: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/buttons/IconButtons.js b/docs/src/pages/demos/buttons/IconButtons.js
index 4b37568911024d..9f5c35b973a896 100644
--- a/docs/src/pages/demos/buttons/IconButtons.js
+++ b/docs/src/pages/demos/buttons/IconButtons.js
@@ -9,7 +9,7 @@ import PhotoCamera from '@material-ui/icons/PhotoCamera';
 
 const styles = theme => ({
   button: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   input: {
     display: 'none',
diff --git a/docs/src/pages/demos/buttons/IconLabelButtons.js b/docs/src/pages/demos/buttons/IconLabelButtons.js
index b41cbff02b7a51..0d1c8a3b7da095 100644
--- a/docs/src/pages/demos/buttons/IconLabelButtons.js
+++ b/docs/src/pages/demos/buttons/IconLabelButtons.js
@@ -11,13 +11,13 @@ import SaveIcon from '@material-ui/icons/Save';
 
 const styles = theme => ({
   button: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   leftIcon: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   rightIcon: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
   },
   iconSmall: {
     fontSize: 20,
diff --git a/docs/src/pages/demos/buttons/OutlinedButtons.js b/docs/src/pages/demos/buttons/OutlinedButtons.js
index c3120b6c661f1c..76507b59380468 100644
--- a/docs/src/pages/demos/buttons/OutlinedButtons.js
+++ b/docs/src/pages/demos/buttons/OutlinedButtons.js
@@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button';
 
 const styles = theme => ({
   button: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   input: {
     display: 'none',
diff --git a/docs/src/pages/demos/buttons/TextButtons.js b/docs/src/pages/demos/buttons/TextButtons.js
index e8d40843bf5ce3..e946bd06165d27 100644
--- a/docs/src/pages/demos/buttons/TextButtons.js
+++ b/docs/src/pages/demos/buttons/TextButtons.js
@@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button';
 
 const styles = theme => ({
   button: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   input: {
     display: 'none',
diff --git a/docs/src/pages/demos/cards/MediaControlCard.js b/docs/src/pages/demos/cards/MediaControlCard.js
index 6316dab05160cd..9e31d31683fb3b 100644
--- a/docs/src/pages/demos/cards/MediaControlCard.js
+++ b/docs/src/pages/demos/cards/MediaControlCard.js
@@ -27,8 +27,8 @@ const styles = theme => ({
   controls: {
     display: 'flex',
     alignItems: 'center',
-    paddingLeft: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
+    paddingLeft: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
   },
   playIcon: {
     height: 38,
diff --git a/docs/src/pages/demos/chips/Chips.js b/docs/src/pages/demos/chips/Chips.js
index 1cc3db60c95f6a..442631d2bdb795 100644
--- a/docs/src/pages/demos/chips/Chips.js
+++ b/docs/src/pages/demos/chips/Chips.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   chip: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/chips/ChipsArray.hooks.js b/docs/src/pages/demos/chips/ChipsArray.hooks.js
index 38d58c1fc4a856..55a81770cb3328 100644
--- a/docs/src/pages/demos/chips/ChipsArray.hooks.js
+++ b/docs/src/pages/demos/chips/ChipsArray.hooks.js
@@ -9,10 +9,10 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     justifyContent: 'center',
     flexWrap: 'wrap',
-    padding: theme.spacing.unit / 2,
+    padding: theme.spacing(0.5),
   },
   chip: {
-    margin: theme.spacing.unit / 2,
+    margin: theme.spacing(0.5),
   },
 }));
 
diff --git a/docs/src/pages/demos/chips/ChipsArray.js b/docs/src/pages/demos/chips/ChipsArray.js
index 4a7f8f0f288a2b..81621449ed4dfc 100644
--- a/docs/src/pages/demos/chips/ChipsArray.js
+++ b/docs/src/pages/demos/chips/ChipsArray.js
@@ -10,10 +10,10 @@ const styles = theme => ({
     display: 'flex',
     justifyContent: 'center',
     flexWrap: 'wrap',
-    padding: theme.spacing.unit / 2,
+    padding: theme.spacing(0.5),
   },
   chip: {
-    margin: theme.spacing.unit / 2,
+    margin: theme.spacing(0.5),
   },
 });
 
diff --git a/docs/src/pages/demos/chips/ChipsPlayground.js b/docs/src/pages/demos/chips/ChipsPlayground.js
index f03c0c32270327..3d0b92ac01e03c 100644
--- a/docs/src/pages/demos/chips/ChipsPlayground.js
+++ b/docs/src/pages/demos/chips/ChipsPlayground.js
@@ -19,10 +19,10 @@ const styles = theme => ({
     flexGrow: 1,
   },
   control: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
   chipWrapper: {
-    marginBottom: theme.spacing.unit * 5,
+    marginBottom: theme.spacing(5),
   },
 });
 
diff --git a/docs/src/pages/demos/chips/OutlinedChips.js b/docs/src/pages/demos/chips/OutlinedChips.js
index 8217dd21831836..fac907b66495d6 100644
--- a/docs/src/pages/demos/chips/OutlinedChips.js
+++ b/docs/src/pages/demos/chips/OutlinedChips.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   chip: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/dialogs/CustomizedDialog.js b/docs/src/pages/demos/dialogs/CustomizedDialog.js
index 0f6f83d37d3e51..11d6476d853cd6 100644
--- a/docs/src/pages/demos/dialogs/CustomizedDialog.js
+++ b/docs/src/pages/demos/dialogs/CustomizedDialog.js
@@ -13,12 +13,12 @@ const DialogTitle = withStyles(theme => ({
   root: {
     borderBottom: `1px solid ${theme.palette.divider}`,
     margin: 0,
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
   closeButton: {
     position: 'absolute',
-    right: theme.spacing.unit,
-    top: theme.spacing.unit,
+    right: theme.spacing(1),
+    top: theme.spacing(1),
     color: theme.palette.grey[500],
   },
 }))(props => {
@@ -38,7 +38,7 @@ const DialogTitle = withStyles(theme => ({
 const DialogContent = withStyles(theme => ({
   root: {
     margin: 0,
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 }))(MuiDialogContent);
 
@@ -46,7 +46,7 @@ const DialogActions = withStyles(theme => ({
   root: {
     borderTop: `1px solid ${theme.palette.divider}`,
     margin: 0,
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
   },
 }))(MuiDialogActions);
 
diff --git a/docs/src/pages/demos/dialogs/MaxWidthDialog.js b/docs/src/pages/demos/dialogs/MaxWidthDialog.js
index ca248693e2e79b..7577bc11dd1f80 100644
--- a/docs/src/pages/demos/dialogs/MaxWidthDialog.js
+++ b/docs/src/pages/demos/dialogs/MaxWidthDialog.js
@@ -22,11 +22,11 @@ const styles = theme => ({
     width: 'fit-content',
   },
   formControl: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
     minWidth: 120,
   },
   formControlLabel: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/dividers/MiddleDividers.js b/docs/src/pages/demos/dividers/MiddleDividers.js
index 2d7faf71fb5bfb..04f9d9052793d0 100644
--- a/docs/src/pages/demos/dividers/MiddleDividers.js
+++ b/docs/src/pages/demos/dividers/MiddleDividers.js
@@ -14,16 +14,16 @@ const styles = theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   chip: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   section1: {
-    margin: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`,
+    margin: `${theme.spacing(3)}px ${theme.spacing(2)}px`,
   },
   section2: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
   section3: {
-    margin: `${theme.spacing.unit * 6}px ${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px`,
+    margin: `${theme.spacing(6)}px ${theme.spacing(2)}px ${theme.spacing(2)}px`,
   },
 });
 
diff --git a/docs/src/pages/demos/dividers/SubheaderDividers.js b/docs/src/pages/demos/dividers/SubheaderDividers.js
index 1b9ed4470bbf25..5bb4ac40c2d0f4 100644
--- a/docs/src/pages/demos/dividers/SubheaderDividers.js
+++ b/docs/src/pages/demos/dividers/SubheaderDividers.js
@@ -16,10 +16,10 @@ const styles = theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   dividerFullWidth: {
-    margin: `5px 0 0 ${theme.spacing.unit * 2}px`,
+    margin: `5px 0 0 ${theme.spacing(2)}px`,
   },
   dividerInset: {
-    margin: `5px 0 0 ${theme.spacing.unit * 9}px`,
+    margin: `5px 0 0 ${theme.spacing(9)}px`,
   },
 });
 
diff --git a/docs/src/pages/demos/drawers/ClippedDrawer.js b/docs/src/pages/demos/drawers/ClippedDrawer.js
index 5c183d85f92e47..633e5e3056684a 100644
--- a/docs/src/pages/demos/drawers/ClippedDrawer.js
+++ b/docs/src/pages/demos/drawers/ClippedDrawer.js
@@ -32,7 +32,7 @@ const styles = theme => ({
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
   },
   toolbar: theme.mixins.toolbar,
 });
diff --git a/docs/src/pages/demos/drawers/MiniDrawer.hooks.js b/docs/src/pages/demos/drawers/MiniDrawer.hooks.js
index 037e9f83b7d6a3..34ebb45d7dbe3f 100644
--- a/docs/src/pages/demos/drawers/MiniDrawer.hooks.js
+++ b/docs/src/pages/demos/drawers/MiniDrawer.hooks.js
@@ -64,9 +64,9 @@ const useStyles = makeStyles(theme => ({
       duration: theme.transitions.duration.leavingScreen,
     }),
     overflowX: 'hidden',
-    width: theme.spacing.unit * 7 + 1,
+    width: theme.spacing(7) + 1,
     [theme.breakpoints.up('sm')]: {
-      width: theme.spacing.unit * 9 + 1,
+      width: theme.spacing(9) + 1,
     },
   },
   toolbar: {
@@ -78,7 +78,7 @@ const useStyles = makeStyles(theme => ({
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
   },
 }));
 
diff --git a/docs/src/pages/demos/drawers/MiniDrawer.js b/docs/src/pages/demos/drawers/MiniDrawer.js
index cdf200f61b64b7..8a63135664161d 100644
--- a/docs/src/pages/demos/drawers/MiniDrawer.js
+++ b/docs/src/pages/demos/drawers/MiniDrawer.js
@@ -65,9 +65,9 @@ const styles = theme => ({
       duration: theme.transitions.duration.leavingScreen,
     }),
     overflowX: 'hidden',
-    width: theme.spacing.unit * 7 + 1,
+    width: theme.spacing(7) + 1,
     [theme.breakpoints.up('sm')]: {
-      width: theme.spacing.unit * 9 + 1,
+      width: theme.spacing(9) + 1,
     },
   },
   toolbar: {
@@ -79,7 +79,7 @@ const styles = theme => ({
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/demos/drawers/PermanentDrawerLeft.js b/docs/src/pages/demos/drawers/PermanentDrawerLeft.js
index d549c36c38a129..6928c154484938 100644
--- a/docs/src/pages/demos/drawers/PermanentDrawerLeft.js
+++ b/docs/src/pages/demos/drawers/PermanentDrawerLeft.js
@@ -35,7 +35,7 @@ const styles = theme => ({
   content: {
     flexGrow: 1,
     backgroundColor: theme.palette.background.default,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/demos/drawers/PermanentDrawerRight.js b/docs/src/pages/demos/drawers/PermanentDrawerRight.js
index 7a8d66de92153f..d26385fd6091db 100644
--- a/docs/src/pages/demos/drawers/PermanentDrawerRight.js
+++ b/docs/src/pages/demos/drawers/PermanentDrawerRight.js
@@ -35,7 +35,7 @@ const styles = theme => ({
   content: {
     flexGrow: 1,
     backgroundColor: theme.palette.background.default,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js b/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js
index 24e52a3f529f4c..6f957572374e39 100644
--- a/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js
+++ b/docs/src/pages/demos/drawers/PersistentDrawerLeft.hooks.js
@@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
diff --git a/docs/src/pages/demos/drawers/PersistentDrawerLeft.js b/docs/src/pages/demos/drawers/PersistentDrawerLeft.js
index 8322854c6db56c..44eb6d9d570cfc 100644
--- a/docs/src/pages/demos/drawers/PersistentDrawerLeft.js
+++ b/docs/src/pages/demos/drawers/PersistentDrawerLeft.js
@@ -62,7 +62,7 @@ const styles = theme => ({
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
diff --git a/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js b/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js
index 8c8af5448382fa..902bc66f9b0452 100644
--- a/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js
+++ b/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js
@@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
diff --git a/docs/src/pages/demos/drawers/PersistentDrawerRight.js b/docs/src/pages/demos/drawers/PersistentDrawerRight.js
index b80ffd265d4937..92a563aee1c593 100644
--- a/docs/src/pages/demos/drawers/PersistentDrawerRight.js
+++ b/docs/src/pages/demos/drawers/PersistentDrawerRight.js
@@ -62,7 +62,7 @@ const styles = theme => ({
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
diff --git a/docs/src/pages/demos/drawers/ResponsiveDrawer.hooks.js b/docs/src/pages/demos/drawers/ResponsiveDrawer.hooks.js
index 8018d8176ebae3..96a980c3aafc3a 100644
--- a/docs/src/pages/demos/drawers/ResponsiveDrawer.hooks.js
+++ b/docs/src/pages/demos/drawers/ResponsiveDrawer.hooks.js
@@ -47,7 +47,7 @@ const useStyles = makeStyles(theme => ({
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
   },
 }));
 
diff --git a/docs/src/pages/demos/drawers/ResponsiveDrawer.js b/docs/src/pages/demos/drawers/ResponsiveDrawer.js
index 79311cb8c221bb..147f23d5860dfe 100644
--- a/docs/src/pages/demos/drawers/ResponsiveDrawer.js
+++ b/docs/src/pages/demos/drawers/ResponsiveDrawer.js
@@ -47,7 +47,7 @@ const styles = theme => ({
   },
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js
index 6b7576b9acc857..aac87619ca065c 100644
--- a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js
+++ b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js
@@ -43,7 +43,7 @@ ExpansionPanelSummary.muiName = 'ExpansionPanelSummary';
 
 const ExpansionPanelDetails = withStyles(theme => ({
   root: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 }))(MuiExpansionPanelDetails);
 
diff --git a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
index b1965fdc9438d3..38654b9ba7036c 100644
--- a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
+++ b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
@@ -36,7 +36,7 @@ const styles = theme => ({
   },
   helper: {
     borderLeft: `2px solid ${theme.palette.divider}`,
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
   },
   link: {
     color: theme.palette.primary.main,
diff --git a/docs/src/pages/demos/lists/InteractiveList.hooks.js b/docs/src/pages/demos/lists/InteractiveList.hooks.js
index 310d87036ee034..288e73548a7be1 100644
--- a/docs/src/pages/demos/lists/InteractiveList.hooks.js
+++ b/docs/src/pages/demos/lists/InteractiveList.hooks.js
@@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   title: {
-    margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`,
+    margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`,
   },
 }));
 
diff --git a/docs/src/pages/demos/lists/InteractiveList.js b/docs/src/pages/demos/lists/InteractiveList.js
index e7324b4625248c..9a4038c5f74ab3 100644
--- a/docs/src/pages/demos/lists/InteractiveList.js
+++ b/docs/src/pages/demos/lists/InteractiveList.js
@@ -26,7 +26,7 @@ const styles = theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   title: {
-    margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`,
+    margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`,
   },
 });
 
diff --git a/docs/src/pages/demos/lists/NestedList.hooks.js b/docs/src/pages/demos/lists/NestedList.hooks.js
index cb7669472c30c1..67a7c38a240a6f 100644
--- a/docs/src/pages/demos/lists/NestedList.hooks.js
+++ b/docs/src/pages/demos/lists/NestedList.hooks.js
@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   nested: {
-    paddingLeft: theme.spacing.unit * 4,
+    paddingLeft: theme.spacing(4),
   },
 }));
 
diff --git a/docs/src/pages/demos/lists/NestedList.js b/docs/src/pages/demos/lists/NestedList.js
index 904a508dc7a5be..7b1a077ff468c7 100644
--- a/docs/src/pages/demos/lists/NestedList.js
+++ b/docs/src/pages/demos/lists/NestedList.js
@@ -21,7 +21,7 @@ const styles = theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   nested: {
-    paddingLeft: theme.spacing.unit * 4,
+    paddingLeft: theme.spacing(4),
   },
 });
 
diff --git a/docs/src/pages/demos/menus/MenuListComposition.hooks.js b/docs/src/pages/demos/menus/MenuListComposition.hooks.js
index 7560e4b10685e8..69396200347491 100644
--- a/docs/src/pages/demos/menus/MenuListComposition.hooks.js
+++ b/docs/src/pages/demos/menus/MenuListComposition.hooks.js
@@ -13,7 +13,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
   },
   paper: {
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
   },
 }));
 
diff --git a/docs/src/pages/demos/menus/MenuListComposition.js b/docs/src/pages/demos/menus/MenuListComposition.js
index b80114ac7124c5..eeb2b5c2de9e51 100644
--- a/docs/src/pages/demos/menus/MenuListComposition.js
+++ b/docs/src/pages/demos/menus/MenuListComposition.js
@@ -14,7 +14,7 @@ const styles = theme => ({
     display: 'flex',
   },
   paper: {
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/paper/PaperSheet.js b/docs/src/pages/demos/paper/PaperSheet.js
index 48f74e344d4dd0..d398d6eb5e7bd4 100644
--- a/docs/src/pages/demos/paper/PaperSheet.js
+++ b/docs/src/pages/demos/paper/PaperSheet.js
@@ -7,8 +7,8 @@ import Typography from '@material-ui/core/Typography';
 const styles = theme => ({
   root: {
     ...theme.mixins.gutters(),
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/pickers/DateAndTimePickers.js b/docs/src/pages/demos/pickers/DateAndTimePickers.js
index 2746043ca451e9..0d5430666e8728 100644
--- a/docs/src/pages/demos/pickers/DateAndTimePickers.js
+++ b/docs/src/pages/demos/pickers/DateAndTimePickers.js
@@ -9,8 +9,8 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     width: 200,
   },
 });
diff --git a/docs/src/pages/demos/pickers/DatePickers.js b/docs/src/pages/demos/pickers/DatePickers.js
index 2c1503dddc09d5..104bdfd369934e 100644
--- a/docs/src/pages/demos/pickers/DatePickers.js
+++ b/docs/src/pages/demos/pickers/DatePickers.js
@@ -9,8 +9,8 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     width: 200,
   },
 });
diff --git a/docs/src/pages/demos/pickers/TimePickers.js b/docs/src/pages/demos/pickers/TimePickers.js
index 388f04bfba7718..0ba9e697165fb1 100644
--- a/docs/src/pages/demos/pickers/TimePickers.js
+++ b/docs/src/pages/demos/pickers/TimePickers.js
@@ -9,8 +9,8 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     width: 200,
   },
 });
diff --git a/docs/src/pages/demos/progress/CircularDeterminate.hooks.js b/docs/src/pages/demos/progress/CircularDeterminate.hooks.js
index af08add9352b5f..aaee46ad49d5d0 100644
--- a/docs/src/pages/demos/progress/CircularDeterminate.hooks.js
+++ b/docs/src/pages/demos/progress/CircularDeterminate.hooks.js
@@ -4,7 +4,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 
 const useStyles = makeStyles(theme => ({
   progress: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
 }));
 
diff --git a/docs/src/pages/demos/progress/CircularDeterminate.js b/docs/src/pages/demos/progress/CircularDeterminate.js
index 3366ba6442bdad..70cd8486563192 100644
--- a/docs/src/pages/demos/progress/CircularDeterminate.js
+++ b/docs/src/pages/demos/progress/CircularDeterminate.js
@@ -5,7 +5,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 
 const styles = theme => ({
   progress: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/progress/CircularIndeterminate.js b/docs/src/pages/demos/progress/CircularIndeterminate.js
index 63b8017b7f4cd9..a2726e34c0621d 100644
--- a/docs/src/pages/demos/progress/CircularIndeterminate.js
+++ b/docs/src/pages/demos/progress/CircularIndeterminate.js
@@ -5,7 +5,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 
 const styles = theme => ({
   progress: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/progress/CircularIntegration.hooks.js b/docs/src/pages/demos/progress/CircularIntegration.hooks.js
index 8caa33d182f894..061245a74e9e86 100644
--- a/docs/src/pages/demos/progress/CircularIntegration.hooks.js
+++ b/docs/src/pages/demos/progress/CircularIntegration.hooks.js
@@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({
     alignItems: 'center',
   },
   wrapper: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     position: 'relative',
   },
   buttonSuccess: {
diff --git a/docs/src/pages/demos/progress/CircularIntegration.js b/docs/src/pages/demos/progress/CircularIntegration.js
index 4db9e652d3b596..97d7ed2dcfb731 100644
--- a/docs/src/pages/demos/progress/CircularIntegration.js
+++ b/docs/src/pages/demos/progress/CircularIntegration.js
@@ -15,7 +15,7 @@ const styles = theme => ({
     alignItems: 'center',
   },
   wrapper: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     position: 'relative',
   },
   buttonSuccess: {
diff --git a/docs/src/pages/demos/progress/CircularStatic.hooks.js b/docs/src/pages/demos/progress/CircularStatic.hooks.js
index a2ce0c742c6ba6..8586547bbe912a 100644
--- a/docs/src/pages/demos/progress/CircularStatic.hooks.js
+++ b/docs/src/pages/demos/progress/CircularStatic.hooks.js
@@ -4,7 +4,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 
 const useStyles = makeStyles(theme => ({
   progress: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
 }));
 
diff --git a/docs/src/pages/demos/progress/CircularStatic.js b/docs/src/pages/demos/progress/CircularStatic.js
index 66c256c73ad92e..92af6894e82d21 100644
--- a/docs/src/pages/demos/progress/CircularStatic.js
+++ b/docs/src/pages/demos/progress/CircularStatic.js
@@ -5,7 +5,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 
 const styles = theme => ({
   progress: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/progress/CustomizedProgress.js b/docs/src/pages/demos/progress/CustomizedProgress.js
index 902ee6d7afcd6a..02a4a40468e797 100644
--- a/docs/src/pages/demos/progress/CustomizedProgress.js
+++ b/docs/src/pages/demos/progress/CustomizedProgress.js
@@ -10,7 +10,7 @@ const styles = theme => ({
     flexGrow: 1,
   },
   progress: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
     color: '#00695c',
   },
   linearColorPrimary: {
@@ -21,7 +21,7 @@ const styles = theme => ({
   },
   // Reproduce the Facebook spinners.
   facebook: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
     position: 'relative',
   },
   facebook1: {
diff --git a/docs/src/pages/demos/progress/DelayingAppearance.hooks.js b/docs/src/pages/demos/progress/DelayingAppearance.hooks.js
index e4cf9b116105bd..673c6a4d05575c 100644
--- a/docs/src/pages/demos/progress/DelayingAppearance.hooks.js
+++ b/docs/src/pages/demos/progress/DelayingAppearance.hooks.js
@@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({
     alignItems: 'center',
   },
   button: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
   placeholder: {
     height: 40,
diff --git a/docs/src/pages/demos/progress/DelayingAppearance.js b/docs/src/pages/demos/progress/DelayingAppearance.js
index 0f8a0440a70f7e..8cf5efd3327935 100644
--- a/docs/src/pages/demos/progress/DelayingAppearance.js
+++ b/docs/src/pages/demos/progress/DelayingAppearance.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     alignItems: 'center',
   },
   button: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
   placeholder: {
     height: 40,
diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js b/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js
index 3706b777c2f2fd..fe573bc89588bd 100644
--- a/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js
+++ b/docs/src/pages/demos/selection-controls/CheckboxesGroup.hooks.js
@@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
   },
   formControl: {
-    margin: theme.spacing.unit * 3,
+    margin: theme.spacing(3),
   },
 }));
 
diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.js b/docs/src/pages/demos/selection-controls/CheckboxesGroup.js
index 39f7cad5379cfb..1bdb5a12a508be 100644
--- a/docs/src/pages/demos/selection-controls/CheckboxesGroup.js
+++ b/docs/src/pages/demos/selection-controls/CheckboxesGroup.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     display: 'flex',
   },
   formControl: {
-    margin: theme.spacing.unit * 3,
+    margin: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js
index d1da9b912a58e7..718529060bdbe6 100644
--- a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js
+++ b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js
@@ -12,10 +12,10 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
   },
   formControl: {
-    margin: theme.spacing.unit * 3,
+    margin: theme.spacing(3),
   },
   group: {
-    margin: `${theme.spacing.unit}px 0`,
+    margin: `${theme.spacing(1)}px 0`,
   },
 }));
 
diff --git a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js
index f32664726beaf8..5995cda9a3354d 100644
--- a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js
+++ b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js
@@ -13,10 +13,10 @@ const styles = theme => ({
     display: 'flex',
   },
   formControl: {
-    margin: theme.spacing.unit * 3,
+    margin: theme.spacing(3),
   },
   group: {
-    margin: `${theme.spacing.unit}px 0`,
+    margin: `${theme.spacing(1)}px 0`,
   },
 });
 
diff --git a/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js b/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js
index 6939ee399a2d1b..028bf07a9420d2 100644
--- a/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js
+++ b/docs/src/pages/demos/selects/ControlledOpenSelect.hooks.js
@@ -9,10 +9,10 @@ import Button from '@material-ui/core/Button';
 const useStyles = makeStyles(theme => ({
   button: {
     display: 'block',
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     minWidth: 120,
   },
 }));
diff --git a/docs/src/pages/demos/selects/ControlledOpenSelect.js b/docs/src/pages/demos/selects/ControlledOpenSelect.js
index c444a2e94abeb5..b0945c2d68e1cc 100644
--- a/docs/src/pages/demos/selects/ControlledOpenSelect.js
+++ b/docs/src/pages/demos/selects/ControlledOpenSelect.js
@@ -10,10 +10,10 @@ import Button from '@material-ui/core/Button';
 const styles = theme => ({
   button: {
     display: 'block',
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     minWidth: 120,
   },
 });
diff --git a/docs/src/pages/demos/selects/CustomizedSelects.js b/docs/src/pages/demos/selects/CustomizedSelects.js
index 890908f09243f4..940f3911195147 100644
--- a/docs/src/pages/demos/selects/CustomizedSelects.js
+++ b/docs/src/pages/demos/selects/CustomizedSelects.js
@@ -11,7 +11,7 @@ import InputBase from '@material-ui/core/InputBase';
 const BootstrapInput = withStyles(theme => ({
   root: {
     'label + &': {
-      marginTop: theme.spacing.unit * 3,
+      marginTop: theme.spacing(3),
     },
   },
   input: {
@@ -50,7 +50,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   bootstrapFormLabel: {
     fontSize: 18,
diff --git a/docs/src/pages/demos/selects/DialogSelect.hooks.js b/docs/src/pages/demos/selects/DialogSelect.hooks.js
index aeaf4a977d3f94..77b1ce1672e56d 100644
--- a/docs/src/pages/demos/selects/DialogSelect.hooks.js
+++ b/docs/src/pages/demos/selects/DialogSelect.hooks.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     minWidth: 120,
   },
 }));
diff --git a/docs/src/pages/demos/selects/DialogSelect.js b/docs/src/pages/demos/selects/DialogSelect.js
index 97086e042b0fd6..a3acdf7822054c 100644
--- a/docs/src/pages/demos/selects/DialogSelect.js
+++ b/docs/src/pages/demos/selects/DialogSelect.js
@@ -18,7 +18,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     minWidth: 120,
   },
 });
diff --git a/docs/src/pages/demos/selects/MultipleSelect.hooks.js b/docs/src/pages/demos/selects/MultipleSelect.hooks.js
index 0fdea873aa2380..d7bf240b8c0783 100644
--- a/docs/src/pages/demos/selects/MultipleSelect.hooks.js
+++ b/docs/src/pages/demos/selects/MultipleSelect.hooks.js
@@ -16,7 +16,7 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     minWidth: 120,
     maxWidth: 300,
   },
@@ -25,10 +25,10 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   chip: {
-    margin: theme.spacing.unit / 4,
+    margin: 2,
   },
   noLabel: {
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
 }));
 
diff --git a/docs/src/pages/demos/selects/MultipleSelect.js b/docs/src/pages/demos/selects/MultipleSelect.js
index 061e0887eb919e..498f33642437c2 100644
--- a/docs/src/pages/demos/selects/MultipleSelect.js
+++ b/docs/src/pages/demos/selects/MultipleSelect.js
@@ -17,7 +17,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     minWidth: 120,
     maxWidth: 300,
   },
@@ -26,10 +26,10 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   chip: {
-    margin: theme.spacing.unit / 4,
+    margin: 2,
   },
   noLabel: {
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/demos/selects/NativeSelects.hooks.js b/docs/src/pages/demos/selects/NativeSelects.hooks.js
index 4c43055932e8a1..e25702854e05e9 100644
--- a/docs/src/pages/demos/selects/NativeSelects.hooks.js
+++ b/docs/src/pages/demos/selects/NativeSelects.hooks.js
@@ -16,11 +16,11 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     minWidth: 120,
   },
   selectEmpty: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 }));
 
diff --git a/docs/src/pages/demos/selects/NativeSelects.js b/docs/src/pages/demos/selects/NativeSelects.js
index 63582f1794aa15..e091ca6b65d64a 100644
--- a/docs/src/pages/demos/selects/NativeSelects.js
+++ b/docs/src/pages/demos/selects/NativeSelects.js
@@ -17,11 +17,11 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     minWidth: 120,
   },
   selectEmpty: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/selects/SimpleSelect.hooks.js b/docs/src/pages/demos/selects/SimpleSelect.hooks.js
index 4a093f0655ee4c..748f01323c3e63 100644
--- a/docs/src/pages/demos/selects/SimpleSelect.hooks.js
+++ b/docs/src/pages/demos/selects/SimpleSelect.hooks.js
@@ -16,11 +16,11 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     minWidth: 120,
   },
   selectEmpty: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 }));
 
diff --git a/docs/src/pages/demos/selects/SimpleSelect.js b/docs/src/pages/demos/selects/SimpleSelect.js
index 76644f1cc5f5fc..bbae533265b986 100644
--- a/docs/src/pages/demos/selects/SimpleSelect.js
+++ b/docs/src/pages/demos/selects/SimpleSelect.js
@@ -17,11 +17,11 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     minWidth: 120,
   },
   selectEmpty: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js
index a0ac3b271ae20f..53abfd8207e54a 100644
--- a/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js
+++ b/docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js
@@ -8,7 +8,7 @@ import CloseIcon from '@material-ui/icons/Close';
 
 const styles = theme => ({
   close: {
-    padding: theme.spacing.unit / 2,
+    padding: theme.spacing(0.5),
   },
 });
 
diff --git a/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js b/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js
index c9b072333986bb..9fabea86bb7ab6 100644
--- a/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js
+++ b/docs/src/pages/demos/snackbars/CustomizedSnackbars.hooks.js
@@ -39,7 +39,7 @@ const useStyles1 = makeStyles(theme => ({
   },
   iconVariant: {
     opacity: 0.9,
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   message: {
     display: 'flex',
@@ -87,7 +87,7 @@ MySnackbarContentWrapper.propTypes = {
 
 const useStyles2 = makeStyles(theme => ({
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 }));
 
diff --git a/docs/src/pages/demos/snackbars/CustomizedSnackbars.js b/docs/src/pages/demos/snackbars/CustomizedSnackbars.js
index aa1c23b9036ff5..1ca053578e5645 100644
--- a/docs/src/pages/demos/snackbars/CustomizedSnackbars.js
+++ b/docs/src/pages/demos/snackbars/CustomizedSnackbars.js
@@ -39,7 +39,7 @@ const styles1 = theme => ({
   },
   iconVariant: {
     opacity: 0.9,
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   message: {
     display: 'flex',
@@ -89,7 +89,7 @@ const MySnackbarContentWrapper = withStyles(styles1)(MySnackbarContent);
 
 const styles2 = theme => ({
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js
index 0ef58baeb4e077..6687837a839bea 100644
--- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js
+++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js
@@ -26,12 +26,12 @@ const useStyles = makeStyles(theme => ({
     marginRight: 20,
   },
   button: {
-    marginBottom: theme.spacing.unit,
+    marginBottom: theme.spacing(1),
   },
   fab: {
     position: 'absolute',
-    bottom: theme.spacing.unit * 2,
-    right: theme.spacing.unit * 2,
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
   },
   fabMoveUp: {
     transform: 'translate3d(0, -46px, 0)',
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
index 07864731a53012..05a8efdc351130 100644
--- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
+++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
@@ -27,12 +27,12 @@ const styles = theme => ({
     marginRight: 20,
   },
   button: {
-    marginBottom: theme.spacing.unit,
+    marginBottom: theme.spacing(1),
   },
   fab: {
     position: 'absolute',
-    bottom: theme.spacing.unit * 2,
-    right: theme.spacing.unit * 2,
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
   },
   fabMoveUp: {
     transform: 'translate3d(0, -46px, 0)',
diff --git a/docs/src/pages/demos/snackbars/LongTextSnackbar.js b/docs/src/pages/demos/snackbars/LongTextSnackbar.js
index 0535fe6e2f222f..840186019de595 100644
--- a/docs/src/pages/demos/snackbars/LongTextSnackbar.js
+++ b/docs/src/pages/demos/snackbars/LongTextSnackbar.js
@@ -12,7 +12,7 @@ const action = (
 
 const styles = theme => ({
   snackbar: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js b/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js
index 9ed3f3ae931830..c6f57532811180 100644
--- a/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js
+++ b/docs/src/pages/demos/snackbars/SimpleSnackbar.hooks.js
@@ -7,7 +7,7 @@ import CloseIcon from '@material-ui/icons/Close';
 
 const useStyles = makeStyles(theme => ({
   close: {
-    padding: theme.spacing.unit / 2,
+    padding: theme.spacing(0.5),
   },
 }));
 
diff --git a/docs/src/pages/demos/snackbars/SimpleSnackbar.js b/docs/src/pages/demos/snackbars/SimpleSnackbar.js
index 1b4ab641594e34..78fcb48deef7cb 100644
--- a/docs/src/pages/demos/snackbars/SimpleSnackbar.js
+++ b/docs/src/pages/demos/snackbars/SimpleSnackbar.js
@@ -8,7 +8,7 @@ import CloseIcon from '@material-ui/icons/Close';
 
 const styles = theme => ({
   close: {
-    padding: theme.spacing.unit / 2,
+    padding: theme.spacing(0.5),
   },
 });
 
diff --git a/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js b/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js
index f91d5813240a5c..dd181cfff2b163 100644
--- a/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/CustomizedStepper.hooks.js
@@ -12,11 +12,11 @@ const useStyles = makeStyles(theme => ({
     width: '90%',
   },
   button: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
   connectorActive: {
     '& $connectorLine': {
diff --git a/docs/src/pages/demos/steppers/CustomizedStepper.js b/docs/src/pages/demos/steppers/CustomizedStepper.js
index 02e1a8ff32b5b2..f15e27c4cdfc01 100644
--- a/docs/src/pages/demos/steppers/CustomizedStepper.js
+++ b/docs/src/pages/demos/steppers/CustomizedStepper.js
@@ -13,11 +13,11 @@ const styles = theme => ({
     width: '90%',
   },
   button: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
   connectorActive: {
     '& $connectorLine': {
diff --git a/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js
index 811b702cee5ce0..a74cb53af42da5 100644
--- a/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.hooks.js
@@ -11,11 +11,11 @@ const useStyles = makeStyles(theme => ({
     width: '90%',
   },
   backButton: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
 }));
 
diff --git a/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.js b/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.js
index ce63480c8c9ca7..f349a9adc0d018 100644
--- a/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.js
+++ b/docs/src/pages/demos/steppers/HorizontalLinearAlternativeLabelStepper.js
@@ -12,11 +12,11 @@ const styles = theme => ({
     width: '90%',
   },
   backButton: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js
index 7c59cdd07e381c..51d4359c3dac5f 100644
--- a/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/HorizontalLinearStepper.hooks.js
@@ -11,11 +11,11 @@ const useStyles = makeStyles(theme => ({
     width: '90%',
   },
   button: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
 }));
 
diff --git a/docs/src/pages/demos/steppers/HorizontalLinearStepper.js b/docs/src/pages/demos/steppers/HorizontalLinearStepper.js
index e7bc7b7d23415d..59b4fa9136407b 100644
--- a/docs/src/pages/demos/steppers/HorizontalLinearStepper.js
+++ b/docs/src/pages/demos/steppers/HorizontalLinearStepper.js
@@ -12,11 +12,11 @@ const styles = theme => ({
     width: '90%',
   },
   button: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js
index dca8a99e68fe4f..59fc5e2c2695b2 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.hooks.js
@@ -11,17 +11,17 @@ const useStyles = makeStyles(theme => ({
     width: '90%',
   },
   button: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   backButton: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   completed: {
     display: 'inline-block',
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
 }));
 
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js
index d2cbb963e11b64..57c89bcc0929d0 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearAlternativeLabelStepper.js
@@ -12,17 +12,17 @@ const styles = theme => ({
     width: '90%',
   },
   button: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   backButton: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   completed: {
     display: 'inline-block',
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js
index 2c62c6f0422ae6..41599dda078724 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.hooks.js
@@ -11,14 +11,14 @@ const useStyles = makeStyles(theme => ({
     width: '90%',
   },
   button: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   completed: {
     display: 'inline-block',
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
 }));
 
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js
index 115d70ace7f2cd..4565fca206bb9c 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepper.js
@@ -12,14 +12,14 @@ const styles = theme => ({
     width: '90%',
   },
   button: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   completed: {
     display: 'inline-block',
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js
index a2e1e4d00ec3ca..982bf4310fe66a 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.hooks.js
@@ -11,11 +11,11 @@ const useStyles = makeStyles(theme => ({
     width: '90%',
   },
   button: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
 }));
 
diff --git a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js
index 34197a1aa4ddc0..7ad353fdc3e411 100644
--- a/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js
+++ b/docs/src/pages/demos/steppers/HorizontalNonLinearStepperWithError.js
@@ -12,11 +12,11 @@ const styles = theme => ({
     width: '90%',
   },
   button: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   instructions: {
-    marginTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.hooks.js b/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.hooks.js
index ed56b59e8d64d4..8fbe8dbe655567 100644
--- a/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.hooks.js
@@ -48,7 +48,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     height: 50,
-    paddingLeft: theme.spacing.unit * 4,
+    paddingLeft: theme.spacing(4),
     backgroundColor: theme.palette.background.default,
   },
   img: {
diff --git a/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.js b/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.js
index 015d65318b2c14..4a2a78d9a719a6 100644
--- a/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.js
+++ b/docs/src/pages/demos/steppers/SwipeableTextMobileStepper.js
@@ -49,7 +49,7 @@ const styles = theme => ({
     display: 'flex',
     alignItems: 'center',
     height: 50,
-    paddingLeft: theme.spacing.unit * 4,
+    paddingLeft: theme.spacing(4),
     backgroundColor: theme.palette.background.default,
   },
   img: {
diff --git a/docs/src/pages/demos/steppers/TextMobileStepper.hooks.js b/docs/src/pages/demos/steppers/TextMobileStepper.hooks.js
index 8f6846bfd96e6c..1c928b278f39bf 100644
--- a/docs/src/pages/demos/steppers/TextMobileStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/TextMobileStepper.hooks.js
@@ -44,7 +44,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     height: 50,
-    paddingLeft: theme.spacing.unit * 4,
+    paddingLeft: theme.spacing(4),
     backgroundColor: theme.palette.background.default,
   },
   img: {
diff --git a/docs/src/pages/demos/steppers/TextMobileStepper.js b/docs/src/pages/demos/steppers/TextMobileStepper.js
index 86f34b1781aa9d..98dcbd5265c631 100644
--- a/docs/src/pages/demos/steppers/TextMobileStepper.js
+++ b/docs/src/pages/demos/steppers/TextMobileStepper.js
@@ -45,7 +45,7 @@ const styles = theme => ({
     display: 'flex',
     alignItems: 'center',
     height: 50,
-    paddingLeft: theme.spacing.unit * 4,
+    paddingLeft: theme.spacing(4),
     backgroundColor: theme.palette.background.default,
   },
   img: {
diff --git a/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js b/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js
index b248d0b0ca10cc..d2e5fcd09a5a89 100644
--- a/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js
+++ b/docs/src/pages/demos/steppers/VerticalLinearStepper.hooks.js
@@ -13,14 +13,14 @@ const useStyles = makeStyles(theme => ({
     width: '90%',
   },
   button: {
-    marginTop: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginRight: theme.spacing(1),
   },
   actionsContainer: {
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing(2),
   },
   resetContainer: {
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
   },
 }));
 
diff --git a/docs/src/pages/demos/steppers/VerticalLinearStepper.js b/docs/src/pages/demos/steppers/VerticalLinearStepper.js
index e2866b501e1d37..9f635fb6c0cdec 100644
--- a/docs/src/pages/demos/steppers/VerticalLinearStepper.js
+++ b/docs/src/pages/demos/steppers/VerticalLinearStepper.js
@@ -14,14 +14,14 @@ const styles = theme => ({
     width: '90%',
   },
   button: {
-    marginTop: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginTop: theme.spacing(1),
+    marginRight: theme.spacing(1),
   },
   actionsContainer: {
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing(2),
   },
   resetContainer: {
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/demos/tables/CustomPaginationActionsTable.hooks.js b/docs/src/pages/demos/tables/CustomPaginationActionsTable.hooks.js
index 7376f4bd0f5922..025e9efd6a0a8e 100644
--- a/docs/src/pages/demos/tables/CustomPaginationActionsTable.hooks.js
+++ b/docs/src/pages/demos/tables/CustomPaginationActionsTable.hooks.js
@@ -18,7 +18,7 @@ const useStyles1 = makeStyles(theme => ({
   root: {
     flexShrink: 0,
     color: theme.palette.text.secondary,
-    marginLeft: theme.spacing.unit * 2.5,
+    marginLeft: theme.spacing(2.5),
   },
 }));
 
@@ -89,7 +89,7 @@ function createData(name, calories, fat) {
 const useStyles2 = makeStyles(theme => ({
   root: {
     width: '100%',
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
   table: {
     minWidth: 500,
diff --git a/docs/src/pages/demos/tables/CustomPaginationActionsTable.js b/docs/src/pages/demos/tables/CustomPaginationActionsTable.js
index 799079eaea6e4a..3af43a22a1680e 100644
--- a/docs/src/pages/demos/tables/CustomPaginationActionsTable.js
+++ b/docs/src/pages/demos/tables/CustomPaginationActionsTable.js
@@ -18,7 +18,7 @@ const actionsStyles = theme => ({
   root: {
     flexShrink: 0,
     color: theme.palette.text.secondary,
-    marginLeft: theme.spacing.unit * 2.5,
+    marginLeft: theme.spacing(2.5),
   },
 });
 
@@ -102,7 +102,7 @@ function createData(name, calories, fat) {
 const styles = theme => ({
   root: {
     width: '100%',
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
   table: {
     minWidth: 500,
diff --git a/docs/src/pages/demos/tables/CustomizedTable.js b/docs/src/pages/demos/tables/CustomizedTable.js
index 84482b0f145812..49631769b8a597 100644
--- a/docs/src/pages/demos/tables/CustomizedTable.js
+++ b/docs/src/pages/demos/tables/CustomizedTable.js
@@ -21,7 +21,7 @@ const CustomTableCell = withStyles(theme => ({
 const styles = theme => ({
   root: {
     width: '100%',
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
     overflowX: 'auto',
   },
   table: {
diff --git a/docs/src/pages/demos/tables/EnhancedTable.hooks.js b/docs/src/pages/demos/tables/EnhancedTable.hooks.js
index cee9a25f280bb9..b995373acd8f81 100644
--- a/docs/src/pages/demos/tables/EnhancedTable.hooks.js
+++ b/docs/src/pages/demos/tables/EnhancedTable.hooks.js
@@ -114,7 +114,7 @@ EnhancedTableHead.propTypes = {
 
 const useToolbarStyles = makeStyles(theme => ({
   root: {
-    paddingRight: theme.spacing.unit,
+    paddingRight: theme.spacing(1),
   },
   highlight:
     theme.palette.type === 'light'
@@ -185,7 +185,7 @@ EnhancedTableToolbar.propTypes = {
 const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
   table: {
     minWidth: 1020,
diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js
index ea0bf86cb351f4..f7d6143191cdf2 100644
--- a/docs/src/pages/demos/tables/EnhancedTable.js
+++ b/docs/src/pages/demos/tables/EnhancedTable.js
@@ -117,7 +117,7 @@ EnhancedTableHead.propTypes = {
 
 const toolbarStyles = theme => ({
   root: {
-    paddingRight: theme.spacing.unit,
+    paddingRight: theme.spacing(1),
   },
   highlight:
     theme.palette.type === 'light'
@@ -190,7 +190,7 @@ EnhancedTableToolbar = withStyles(toolbarStyles)(EnhancedTableToolbar);
 const styles = theme => ({
   root: {
     width: '100%',
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
   table: {
     minWidth: 1020,
diff --git a/docs/src/pages/demos/tables/SimpleTable.js b/docs/src/pages/demos/tables/SimpleTable.js
index a3c0ede6806a72..ebe5eb41d42055 100644
--- a/docs/src/pages/demos/tables/SimpleTable.js
+++ b/docs/src/pages/demos/tables/SimpleTable.js
@@ -11,7 +11,7 @@ import Paper from '@material-ui/core/Paper';
 const styles = theme => ({
   root: {
     width: '100%',
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
     overflowX: 'auto',
   },
   table: {
diff --git a/docs/src/pages/demos/tables/SpanningTable.js b/docs/src/pages/demos/tables/SpanningTable.js
index cf4a72eb88a528..fee73c68851b34 100644
--- a/docs/src/pages/demos/tables/SpanningTable.js
+++ b/docs/src/pages/demos/tables/SpanningTable.js
@@ -13,7 +13,7 @@ const TAX_RATE = 0.07;
 const styles = theme => ({
   root: {
     width: '100%',
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
     overflowX: 'auto',
   },
   table: {
diff --git a/docs/src/pages/demos/tabs/CustomizedTabs.hooks.js b/docs/src/pages/demos/tabs/CustomizedTabs.hooks.js
index 8127aee54a21af..4e9d7dea675c8d 100644
--- a/docs/src/pages/demos/tabs/CustomizedTabs.hooks.js
+++ b/docs/src/pages/demos/tabs/CustomizedTabs.hooks.js
@@ -19,7 +19,7 @@ const useStyles = makeStyles(theme => ({
     textTransform: 'initial',
     minWidth: 72,
     fontWeight: theme.typography.fontWeightRegular,
-    marginRight: theme.spacing.unit * 4,
+    marginRight: theme.spacing(4),
     fontFamily: [
       '-apple-system',
       'BlinkMacSystemFont',
@@ -46,7 +46,7 @@ const useStyles = makeStyles(theme => ({
   },
   tabSelected: {},
   typography: {
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
   },
 }));
 
diff --git a/docs/src/pages/demos/tabs/CustomizedTabs.js b/docs/src/pages/demos/tabs/CustomizedTabs.js
index 1233035d750945..3e875655b7b57a 100644
--- a/docs/src/pages/demos/tabs/CustomizedTabs.js
+++ b/docs/src/pages/demos/tabs/CustomizedTabs.js
@@ -20,7 +20,7 @@ const styles = theme => ({
     textTransform: 'initial',
     minWidth: 72,
     fontWeight: theme.typography.fontWeightRegular,
-    marginRight: theme.spacing.unit * 4,
+    marginRight: theme.spacing(4),
     fontFamily: [
       '-apple-system',
       'BlinkMacSystemFont',
@@ -47,7 +47,7 @@ const styles = theme => ({
   },
   tabSelected: {},
   typography: {
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/demos/text-fields/ComposedTextField.js b/docs/src/pages/demos/text-fields/ComposedTextField.js
index 4264026a145469..478c9941e33133 100644
--- a/docs/src/pages/demos/text-fields/ComposedTextField.js
+++ b/docs/src/pages/demos/text-fields/ComposedTextField.js
@@ -15,7 +15,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/text-fields/ComposedTextField.tsx b/docs/src/pages/demos/text-fields/ComposedTextField.tsx
index b49745de704cc9..1a7661f16d5fb7 100644
--- a/docs/src/pages/demos/text-fields/ComposedTextField.tsx
+++ b/docs/src/pages/demos/text-fields/ComposedTextField.tsx
@@ -16,7 +16,7 @@ const styles = (theme: Theme) =>
       flexWrap: 'wrap',
     },
     formControl: {
-      margin: theme.spacing.unit,
+      margin: theme.spacing(1),
     },
   });
 
diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.js b/docs/src/pages/demos/text-fields/CustomizedInputs.js
index fa01bd82148575..73959e0dfc5ac4 100644
--- a/docs/src/pages/demos/text-fields/CustomizedInputs.js
+++ b/docs/src/pages/demos/text-fields/CustomizedInputs.js
@@ -15,7 +15,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   cssLabel: {
     '&$cssFocused': {
@@ -36,7 +36,7 @@ const styles = theme => ({
   notchedOutline: {},
   bootstrapRoot: {
     'label + &': {
-      marginTop: theme.spacing.unit * 3,
+      marginTop: theme.spacing(3),
     },
   },
   bootstrapInput: {
diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.tsx b/docs/src/pages/demos/text-fields/CustomizedInputs.tsx
index f499d9e01a4b78..7c463454a15813 100644
--- a/docs/src/pages/demos/text-fields/CustomizedInputs.tsx
+++ b/docs/src/pages/demos/text-fields/CustomizedInputs.tsx
@@ -23,7 +23,7 @@ const styles = (theme: Theme) =>
       flexWrap: 'wrap',
     },
     margin: {
-      margin: theme.spacing.unit,
+      margin: theme.spacing(1),
     },
     cssLabel: {
       '&$cssFocused': {
@@ -44,7 +44,7 @@ const styles = (theme: Theme) =>
     notchedOutline: {},
     bootstrapRoot: {
       'label + &': {
-        marginTop: theme.spacing.unit * 3,
+        marginTop: theme.spacing(3),
       },
     },
     bootstrapInput: {
diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js b/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js
index 327c8a7de05864..cb17c94a115df0 100644
--- a/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js
+++ b/docs/src/pages/demos/text-fields/FilledInputAdornments.hooks.js
@@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   textField: {
     flexBasis: 200,
diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.js b/docs/src/pages/demos/text-fields/FilledInputAdornments.js
index 128b8fe469c32c..ccd35f1bbc40a4 100644
--- a/docs/src/pages/demos/text-fields/FilledInputAdornments.js
+++ b/docs/src/pages/demos/text-fields/FilledInputAdornments.js
@@ -15,7 +15,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   textField: {
     flexBasis: 200,
diff --git a/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx b/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx
index f57ca517514f8b..4179b3e65ad061 100644
--- a/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx
+++ b/docs/src/pages/demos/text-fields/FilledInputAdornments.tsx
@@ -16,7 +16,7 @@ const styles = (theme: Theme) =>
       flexWrap: 'wrap',
     },
     margin: {
-      margin: theme.spacing.unit,
+      margin: theme.spacing(1),
     },
     textField: {
       flexBasis: 200,
diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js b/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js
index c8ecd21f0ccabc..877d6474426e9f 100644
--- a/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js
+++ b/docs/src/pages/demos/text-fields/FilledTextFields.hooks.js
@@ -10,8 +10,8 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
   },
   dense: {
     marginTop: 16,
diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.js b/docs/src/pages/demos/text-fields/FilledTextFields.js
index f82585e7e230aa..493ee37a0e6065 100644
--- a/docs/src/pages/demos/text-fields/FilledTextFields.js
+++ b/docs/src/pages/demos/text-fields/FilledTextFields.js
@@ -11,8 +11,8 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
   },
   dense: {
     marginTop: 16,
diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.tsx b/docs/src/pages/demos/text-fields/FilledTextFields.tsx
index 094a8414ac41e5..f8b7e412d4188c 100644
--- a/docs/src/pages/demos/text-fields/FilledTextFields.tsx
+++ b/docs/src/pages/demos/text-fields/FilledTextFields.tsx
@@ -12,8 +12,8 @@ const styles = (theme: Theme) =>
       flexWrap: 'wrap',
     },
     textField: {
-      marginLeft: theme.spacing.unit,
-      marginRight: theme.spacing.unit,
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
     },
     dense: {
       marginTop: 16,
diff --git a/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js b/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js
index 7cadb307620698..a0c5d4b95bbfe1 100644
--- a/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js
+++ b/docs/src/pages/demos/text-fields/FormattedInputs.hooks.js
@@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 }));
 
diff --git a/docs/src/pages/demos/text-fields/FormattedInputs.js b/docs/src/pages/demos/text-fields/FormattedInputs.js
index cbb0e65f1d4c5b..5a900820d34cdf 100644
--- a/docs/src/pages/demos/text-fields/FormattedInputs.js
+++ b/docs/src/pages/demos/text-fields/FormattedInputs.js
@@ -14,7 +14,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   formControl: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/text-fields/FormattedInputs.tsx b/docs/src/pages/demos/text-fields/FormattedInputs.tsx
index e1bc3f7ca7bf0f..dfd5508c90a03f 100644
--- a/docs/src/pages/demos/text-fields/FormattedInputs.tsx
+++ b/docs/src/pages/demos/text-fields/FormattedInputs.tsx
@@ -15,7 +15,7 @@ const styles = (theme: Theme) =>
       flexWrap: 'wrap',
     },
     formControl: {
-      margin: theme.spacing.unit,
+      margin: theme.spacing(1),
     },
   });
 
diff --git a/docs/src/pages/demos/text-fields/InputAdornments.hooks.js b/docs/src/pages/demos/text-fields/InputAdornments.hooks.js
index 0968c78a4e2f23..7eabb044d6ea4a 100644
--- a/docs/src/pages/demos/text-fields/InputAdornments.hooks.js
+++ b/docs/src/pages/demos/text-fields/InputAdornments.hooks.js
@@ -18,10 +18,10 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   withoutLabel: {
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
   textField: {
     flexBasis: 200,
diff --git a/docs/src/pages/demos/text-fields/InputAdornments.js b/docs/src/pages/demos/text-fields/InputAdornments.js
index a162d8bc098758..9740024bba9dcf 100644
--- a/docs/src/pages/demos/text-fields/InputAdornments.js
+++ b/docs/src/pages/demos/text-fields/InputAdornments.js
@@ -19,10 +19,10 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   withoutLabel: {
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
   textField: {
     flexBasis: 200,
diff --git a/docs/src/pages/demos/text-fields/InputAdornments.tsx b/docs/src/pages/demos/text-fields/InputAdornments.tsx
index 630ae4b1a571c6..51cc0447e70644 100644
--- a/docs/src/pages/demos/text-fields/InputAdornments.tsx
+++ b/docs/src/pages/demos/text-fields/InputAdornments.tsx
@@ -20,10 +20,10 @@ const styles = (theme: Theme) =>
       flexWrap: 'wrap',
     },
     margin: {
-      margin: theme.spacing.unit,
+      margin: theme.spacing(1),
     },
     withoutLabel: {
-      marginTop: theme.spacing.unit * 3,
+      marginTop: theme.spacing(3),
     },
     textField: {
       flexBasis: 200,
diff --git a/docs/src/pages/demos/text-fields/InputWithIcon.js b/docs/src/pages/demos/text-fields/InputWithIcon.js
index 7c0447c6ae7c2d..890d59600eb0f3 100644
--- a/docs/src/pages/demos/text-fields/InputWithIcon.js
+++ b/docs/src/pages/demos/text-fields/InputWithIcon.js
@@ -11,7 +11,7 @@ import AccountCircle from '@material-ui/icons/AccountCircle';
 
 const styles = theme => ({
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/text-fields/InputWithIcon.tsx b/docs/src/pages/demos/text-fields/InputWithIcon.tsx
index a3eeae0a7d4130..f8dc50e5e08b7c 100644
--- a/docs/src/pages/demos/text-fields/InputWithIcon.tsx
+++ b/docs/src/pages/demos/text-fields/InputWithIcon.tsx
@@ -12,7 +12,7 @@ import AccountCircle from '@material-ui/icons/AccountCircle';
 const styles = (theme: Theme) =>
   createStyles({
     margin: {
-      margin: theme.spacing.unit,
+      margin: theme.spacing(1),
     },
   });
 
@@ -47,7 +47,7 @@ function InputWithIcon(props: Props) {
         }}
       />
       <div className={classes.margin}>
-        <Grid container spacing={8} alignItems="flex-end">
+        <Grid container spacing={1} alignItems="flex-end">
           <Grid item>
             <AccountCircle />
           </Grid>
diff --git a/docs/src/pages/demos/text-fields/Inputs.js b/docs/src/pages/demos/text-fields/Inputs.js
index 03b0eba7272b6b..129a5e6cf77263 100644
--- a/docs/src/pages/demos/text-fields/Inputs.js
+++ b/docs/src/pages/demos/text-fields/Inputs.js
@@ -9,7 +9,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   input: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/text-fields/Inputs.tsx b/docs/src/pages/demos/text-fields/Inputs.tsx
index d31199f3f8a4e9..77e5a9ef4935c9 100644
--- a/docs/src/pages/demos/text-fields/Inputs.tsx
+++ b/docs/src/pages/demos/text-fields/Inputs.tsx
@@ -10,7 +10,7 @@ const styles = (theme: Theme) =>
       flexWrap: 'wrap',
     },
     input: {
-      margin: theme.spacing.unit,
+      margin: theme.spacing(1),
     },
   });
 
diff --git a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js
index 5c2c83742179d1..bc329b857373e0 100644
--- a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js
+++ b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.hooks.js
@@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   textField: {
     flexBasis: 200,
diff --git a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js
index 7e63c0661333c4..56395cc5527faf 100644
--- a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js
+++ b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.js
@@ -15,7 +15,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   margin: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   textField: {
     flexBasis: 200,
diff --git a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx
index 8dee7d43c8ecf7..0d5b15ebf81762 100644
--- a/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx
+++ b/docs/src/pages/demos/text-fields/OutlinedInputAdornments.tsx
@@ -16,7 +16,7 @@ const styles = (theme: Theme) =>
       flexWrap: 'wrap',
     },
     margin: {
-      margin: theme.spacing.unit,
+      margin: theme.spacing(1),
     },
     textField: {
       flexBasis: 200,
diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js b/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js
index dedafd06c6aeaa..22312260edcbd5 100644
--- a/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js
+++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.hooks.js
@@ -10,11 +10,11 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
   },
   dense: {
-    marginTop: 16,
+    marginTop: theme.spacing(2),
   },
   menu: {
     width: 200,
diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.js b/docs/src/pages/demos/text-fields/OutlinedTextFields.js
index a736cc9b147104..e968b55c5bca77 100644
--- a/docs/src/pages/demos/text-fields/OutlinedTextFields.js
+++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.js
@@ -11,11 +11,11 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
   },
   dense: {
-    marginTop: 16,
+    marginTop: theme.spacing(2),
   },
   menu: {
     width: 200,
diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx b/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx
index bc08f421d93acf..e8d4275cf8cf83 100644
--- a/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx
+++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx
@@ -12,11 +12,11 @@ const styles = (theme: Theme) =>
       flexWrap: 'wrap',
     },
     textField: {
-      marginLeft: theme.spacing.unit,
-      marginRight: theme.spacing.unit,
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
     },
     dense: {
-      marginTop: 16,
+      marginTop: theme.spacing(2),
     },
     menu: {
       width: 200,
diff --git a/docs/src/pages/demos/text-fields/TextFieldMargins.js b/docs/src/pages/demos/text-fields/TextFieldMargins.js
index 61571745fbe3e8..a79af8c3f56c60 100644
--- a/docs/src/pages/demos/text-fields/TextFieldMargins.js
+++ b/docs/src/pages/demos/text-fields/TextFieldMargins.js
@@ -9,8 +9,8 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     width: 200,
   },
 });
diff --git a/docs/src/pages/demos/text-fields/TextFieldMargins.tsx b/docs/src/pages/demos/text-fields/TextFieldMargins.tsx
index 2c7b9035e26bbb..7821fabd310f4f 100644
--- a/docs/src/pages/demos/text-fields/TextFieldMargins.tsx
+++ b/docs/src/pages/demos/text-fields/TextFieldMargins.tsx
@@ -10,8 +10,8 @@ const styles = (theme: Theme) =>
       flexWrap: 'wrap',
     },
     textField: {
-      marginLeft: theme.spacing.unit,
-      marginRight: theme.spacing.unit,
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
       width: 200,
     },
   });
diff --git a/docs/src/pages/demos/text-fields/TextFields.hooks.js b/docs/src/pages/demos/text-fields/TextFields.hooks.js
index d1b3d5b5d0b537..e5d4d4975d81c7 100644
--- a/docs/src/pages/demos/text-fields/TextFields.hooks.js
+++ b/docs/src/pages/demos/text-fields/TextFields.hooks.js
@@ -10,8 +10,8 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     width: 200,
   },
   dense: {
diff --git a/docs/src/pages/demos/text-fields/TextFields.js b/docs/src/pages/demos/text-fields/TextFields.js
index 1562740657f38e..17f088cb79f070 100644
--- a/docs/src/pages/demos/text-fields/TextFields.js
+++ b/docs/src/pages/demos/text-fields/TextFields.js
@@ -11,8 +11,8 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   textField: {
-    marginLeft: theme.spacing.unit,
-    marginRight: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
     width: 200,
   },
   dense: {
diff --git a/docs/src/pages/demos/text-fields/TextFields.tsx b/docs/src/pages/demos/text-fields/TextFields.tsx
index 8d105c5584584d..1f6d42942bcc1b 100644
--- a/docs/src/pages/demos/text-fields/TextFields.tsx
+++ b/docs/src/pages/demos/text-fields/TextFields.tsx
@@ -12,8 +12,8 @@ const styles = (theme: Theme) =>
       flexWrap: 'wrap',
     },
     textField: {
-      marginLeft: theme.spacing.unit,
-      marginRight: theme.spacing.unit,
+      marginLeft: theme.spacing(1),
+      marginRight: theme.spacing(1),
       width: 200,
     },
     dense: {
diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js b/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js
index b13d6b988f4efd..e23cabbec87526 100644
--- a/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js
+++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.hooks.js
@@ -53,7 +53,7 @@ function arrowGenerator(color) {
 
 const useStyles = makeStyles(theme => ({
   button: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   lightTooltip: {
     backgroundColor: theme.palette.common.white,
diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.js b/docs/src/pages/demos/tooltips/CustomizedTooltips.js
index 70b9e1c128a8e1..033ed1e2c3fde7 100644
--- a/docs/src/pages/demos/tooltips/CustomizedTooltips.js
+++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.js
@@ -54,7 +54,7 @@ function arrowGenerator(color) {
 
 const styles = theme => ({
   button: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   lightTooltip: {
     backgroundColor: theme.palette.common.white,
diff --git a/docs/src/pages/demos/tooltips/InteractiveTooltips.js b/docs/src/pages/demos/tooltips/InteractiveTooltips.js
index a4f8777aa9f0f4..7a7720028bd206 100644
--- a/docs/src/pages/demos/tooltips/InteractiveTooltips.js
+++ b/docs/src/pages/demos/tooltips/InteractiveTooltips.js
@@ -6,7 +6,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 const styles = theme => ({
   button: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/demos/tooltips/SimpleTooltips.js b/docs/src/pages/demos/tooltips/SimpleTooltips.js
index 55a3bdfda6aae8..36ded3f20cb0ba 100644
--- a/docs/src/pages/demos/tooltips/SimpleTooltips.js
+++ b/docs/src/pages/demos/tooltips/SimpleTooltips.js
@@ -9,12 +9,12 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 const styles = theme => ({
   fab: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
   absolute: {
     position: 'absolute',
-    bottom: theme.spacing.unit * 2,
-    right: theme.spacing.unit * 3,
+    bottom: theme.spacing(2),
+    right: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/demos/tooltips/VariableWidth.js b/docs/src/pages/demos/tooltips/VariableWidth.js
index f8fb7d30de8cde..80b525a1510f49 100644
--- a/docs/src/pages/demos/tooltips/VariableWidth.js
+++ b/docs/src/pages/demos/tooltips/VariableWidth.js
@@ -6,7 +6,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 const styles = theme => ({
   button: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   customWidth: {
     maxWidth: 500,
@@ -17,9 +17,9 @@ const styles = theme => ({
 });
 
 const longText = `
-Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus. 
-Praesent non nunc mollis, fermentum neque at, semper arcu. 
-Nullam eget est sed sem iaculis gravida eget vitae justo. 
+Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus.
+Praesent non nunc mollis, fermentum neque at, semper arcu.
+Nullam eget est sed sem iaculis gravida eget vitae justo.
 `;
 
 function VariableWidth({ classes }) {
diff --git a/docs/src/pages/discover-more/showcase/Showcase.js b/docs/src/pages/discover-more/showcase/Showcase.js
index 22ab5048229a41..e25e1b82e666a1 100644
--- a/docs/src/pages/discover-more/showcase/Showcase.js
+++ b/docs/src/pages/discover-more/showcase/Showcase.js
@@ -19,25 +19,25 @@ const styles = theme => ({
   root: {
     backgroundColor: theme.palette.background.default,
     // Hide the demo container padding
-    margin: -theme.spacing.unit * 3,
+    margin: -theme.spacing(3),
     // Maintain alignment with the markdown text
     [theme.breakpoints.down('xs')]: {
       padding: 30,
     },
   },
   formControl: {
-    marginBottom: theme.spacing.unit * 4,
+    marginBottom: theme.spacing(4),
     minWidth: 120,
   },
   title: {
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing(2),
   },
   card: {
-    marginBottom: theme.spacing.unit,
+    marginBottom: theme.spacing(1),
     maxWidth: 600,
   },
   description: {
-    marginBottom: theme.spacing.unit * 6,
+    marginBottom: theme.spacing(6),
   },
   cardMedia: {
     paddingTop: '75%', // 4:3
diff --git a/docs/src/pages/discover-more/team/Team.js b/docs/src/pages/discover-more/team/Team.js
index 93da5d7e9e905f..a382da088c9c9c 100644
--- a/docs/src/pages/discover-more/team/Team.js
+++ b/docs/src/pages/discover-more/team/Team.js
@@ -89,19 +89,19 @@ const members = [
 
 const styles = theme => ({
   details: {
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px 0`,
+    margin: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px 0`,
   },
   cover: {
-    width: theme.spacing.unit * 10,
-    height: theme.spacing.unit * 10,
-    margin: theme.spacing.unit * 2,
+    width: theme.spacing(10),
+    height: theme.spacing(10),
+    margin: theme.spacing(2),
     borderRadius: '50%',
     flexShrink: 0,
     backgroundColor: theme.palette.background.default,
   },
   icon: {
     fontSize: 18,
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/album/Album.js b/docs/src/pages/getting-started/page-layout-examples/album/Album.js
index 46f308a2998a86..e980b39404a20b 100644
--- a/docs/src/pages/getting-started/page-layout-examples/album/Album.js
+++ b/docs/src/pages/getting-started/page-layout-examples/album/Album.js
@@ -19,7 +19,7 @@ const styles = theme => ({
     position: 'relative',
   },
   icon: {
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
   },
   heroUnit: {
     backgroundColor: theme.palette.background.paper,
@@ -27,23 +27,23 @@ const styles = theme => ({
   heroContent: {
     maxWidth: 600,
     margin: '0 auto',
-    padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`,
+    padding: `${theme.spacing(8)}px 0 ${theme.spacing(6)}px`,
   },
   heroButtons: {
-    marginTop: theme.spacing.unit * 4,
+    marginTop: theme.spacing(4),
   },
   layout: {
     width: 'auto',
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
-    [theme.breakpoints.up(1100 + theme.spacing.unit * 3 * 2)]: {
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
+    [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
       width: 1100,
       marginLeft: 'auto',
       marginRight: 'auto',
     },
   },
   cardGrid: {
-    padding: `${theme.spacing.unit * 8}px 0`,
+    padding: `${theme.spacing(8)}px 0`,
   },
   card: {
     height: '100%',
@@ -58,7 +58,7 @@ const styles = theme => ({
   },
   footer: {
     backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing.unit * 6,
+    padding: theme.spacing(6),
   },
 });
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js b/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js
index 556bea9907d0b6..66074485b446fb 100644
--- a/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js
+++ b/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js
@@ -22,9 +22,9 @@ import post3 from './blog-post.3.md';
 const styles = theme => ({
   layout: {
     width: 'auto',
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
-    [theme.breakpoints.up(1100 + theme.spacing.unit * 3 * 2)]: {
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
+    [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
       width: 1100,
       marginLeft: 'auto',
       marginRight: 'auto',
@@ -42,16 +42,16 @@ const styles = theme => ({
   mainFeaturedPost: {
     backgroundColor: theme.palette.grey[800],
     color: theme.palette.common.white,
-    marginBottom: theme.spacing.unit * 4,
+    marginBottom: theme.spacing(4),
   },
   mainFeaturedPostContent: {
-    padding: `${theme.spacing.unit * 6}px`,
+    padding: `${theme.spacing(6)}px`,
     [theme.breakpoints.up('md')]: {
       paddingRight: 0,
     },
   },
   mainGrid: {
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
   card: {
     display: 'flex',
@@ -63,19 +63,19 @@ const styles = theme => ({
     width: 160,
   },
   markdown: {
-    padding: `${theme.spacing.unit * 3}px 0`,
+    padding: `${theme.spacing(3)}px 0`,
   },
   sidebarAboutBox: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     backgroundColor: theme.palette.grey[200],
   },
   sidebarSection: {
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
   footer: {
     backgroundColor: theme.palette.background.paper,
-    marginTop: theme.spacing.unit * 8,
-    padding: `${theme.spacing.unit * 6}px 0`,
+    marginTop: theme.spacing(8),
+    padding: `${theme.spacing(6)}px 0`,
   },
 });
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/blog/Markdown.js b/docs/src/pages/getting-started/page-layout-examples/blog/Markdown.js
index 5b5e418a72bdd6..b462055658c994 100644
--- a/docs/src/pages/getting-started/page-layout-examples/blog/Markdown.js
+++ b/docs/src/pages/getting-started/page-layout-examples/blog/Markdown.js
@@ -5,7 +5,7 @@ import Typography from '@material-ui/core/Typography';
 
 const styles = theme => ({
   listItem: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/checkout/Checkout.js b/docs/src/pages/getting-started/page-layout-examples/checkout/Checkout.js
index de93a9434ddcd7..87b6dd91e1eadd 100644
--- a/docs/src/pages/getting-started/page-layout-examples/checkout/Checkout.js
+++ b/docs/src/pages/getting-started/page-layout-examples/checkout/Checkout.js
@@ -20,34 +20,34 @@ const styles = theme => ({
   },
   layout: {
     width: 'auto',
-    marginLeft: theme.spacing.unit * 2,
-    marginRight: theme.spacing.unit * 2,
-    [theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]: {
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2),
+    [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
       width: 600,
       marginLeft: 'auto',
       marginRight: 'auto',
     },
   },
   paper: {
-    marginTop: theme.spacing.unit * 3,
-    marginBottom: theme.spacing.unit * 3,
-    padding: theme.spacing.unit * 2,
-    [theme.breakpoints.up(600 + theme.spacing.unit * 3 * 2)]: {
-      marginTop: theme.spacing.unit * 6,
-      marginBottom: theme.spacing.unit * 6,
-      padding: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(3),
+    padding: theme.spacing(2),
+    [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: {
+      marginTop: theme.spacing(6),
+      marginBottom: theme.spacing(6),
+      padding: theme.spacing(3),
     },
   },
   stepper: {
-    padding: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 5}px`,
+    padding: `${theme.spacing(3)}px 0 ${theme.spacing(5)}px`,
   },
   buttons: {
     display: 'flex',
     justifyContent: 'flex-end',
   },
   button: {
-    marginTop: theme.spacing.unit * 3,
-    marginLeft: theme.spacing.unit,
+    marginTop: theme.spacing(3),
+    marginLeft: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js b/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js
index a196e7a0857017..88e29b60ed2f91 100644
--- a/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js
+++ b/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js
@@ -24,13 +24,13 @@ const payments = [
 
 const styles = theme => ({
   listItem: {
-    padding: `${theme.spacing.unit}px 0`,
+    padding: `${theme.spacing(1)}px 0`,
   },
   total: {
     fontWeight: '700',
   },
   title: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js b/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js
index f10142df4dde78..4f029eb83a5c4c 100644
--- a/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js
+++ b/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js
@@ -74,15 +74,15 @@ const styles = theme => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
     }),
-    width: theme.spacing.unit * 7,
+    width: theme.spacing(7),
     [theme.breakpoints.up('sm')]: {
-      width: theme.spacing.unit * 9,
+      width: theme.spacing(9),
     },
   },
   appBarSpacer: theme.mixins.toolbar,
   content: {
     flexGrow: 1,
-    padding: theme.spacing.unit * 3,
+    padding: theme.spacing(3),
     height: '100vh',
     overflow: 'auto',
   },
@@ -93,7 +93,7 @@ const styles = theme => ({
     height: 320,
   },
   h5: {
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
index ffdc345a1d7f07..44d8a8d3ab04a1 100644
--- a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
+++ b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
@@ -28,9 +28,9 @@ const styles = theme => ({
   },
   layout: {
     width: 'auto',
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
-    [theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
+    [theme.breakpoints.up(900 + theme.spacing(3) * 2)]: {
       width: 900,
       marginLeft: 'auto',
       marginRight: 'auto',
@@ -39,7 +39,7 @@ const styles = theme => ({
   heroContent: {
     maxWidth: 600,
     margin: '0 auto',
-    padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`,
+    padding: `${theme.spacing(8)}px 0 ${theme.spacing(6)}px`,
   },
   cardHeader: {
     backgroundColor: theme.palette.grey[200],
@@ -48,17 +48,17 @@ const styles = theme => ({
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'baseline',
-    marginBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing(2),
   },
   cardActions: {
     [theme.breakpoints.up('sm')]: {
-      paddingBottom: theme.spacing.unit * 2,
+      paddingBottom: theme.spacing(2),
     },
   },
   footer: {
-    marginTop: theme.spacing.unit * 8,
+    marginTop: theme.spacing(8),
     borderTop: `1px solid ${theme.palette.divider}`,
-    padding: `${theme.spacing.unit * 6}px 0`,
+    padding: `${theme.spacing(6)}px 0`,
   },
 });
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js b/docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js
index d357d56a2391be..515beb81cb7150 100644
--- a/docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js
+++ b/docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js
@@ -17,31 +17,31 @@ const styles = theme => ({
   main: {
     width: 'auto',
     display: 'block', // Fix IE 11 issue.
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
-    [theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: {
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
+    [theme.breakpoints.up(400 + theme.spacing(3) * 2)]: {
       width: 400,
       marginLeft: 'auto',
       marginRight: 'auto',
     },
   },
   paper: {
-    marginTop: theme.spacing.unit * 8,
+    marginTop: theme.spacing(8),
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`,
+    padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`,
   },
   avatar: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     backgroundColor: theme.palette.secondary.main,
   },
   form: {
     width: '100%', // Fix IE 11 issue.
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
   },
   submit: {
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOut.js b/docs/src/pages/guides/right-to-left/RtlOptOut.js
index 030f5c5d7641fe..db13a909018601 100644
--- a/docs/src/pages/guides/right-to-left/RtlOptOut.js
+++ b/docs/src/pages/guides/right-to-left/RtlOptOut.js
@@ -5,8 +5,8 @@ import { withStyles } from '@material-ui/core/styles';
 const styles = theme => ({
   root: {
     width: '100%',
-    marginTop: theme.spacing.unit * 4,
-    marginRight: theme.spacing.unit * 2,
+    marginTop: theme.spacing(4),
+    marginRight: theme.spacing(2),
   },
   affected: {
     textAlign: 'right',
diff --git a/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js b/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js
index bd203fe3a50824..6b05677a582eee 100644
--- a/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js
+++ b/docs/src/pages/lab/speed-dial/OpenIconSpeedDial.js
@@ -18,8 +18,8 @@ const styles = theme => ({
   },
   speedDial: {
     position: 'absolute',
-    bottom: theme.spacing.unit * 2,
-    right: theme.spacing.unit * 3,
+    bottom: theme.spacing(2),
+    right: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/lab/speed-dial/SpeedDialTooltipOpen.js b/docs/src/pages/lab/speed-dial/SpeedDialTooltipOpen.js
index 3f44b0bfde15c4..8e4fce53b73281 100644
--- a/docs/src/pages/lab/speed-dial/SpeedDialTooltipOpen.js
+++ b/docs/src/pages/lab/speed-dial/SpeedDialTooltipOpen.js
@@ -17,8 +17,8 @@ const styles = theme => ({
   },
   speedDial: {
     position: 'absolute',
-    bottom: theme.spacing.unit * 2,
-    right: theme.spacing.unit * 3,
+    bottom: theme.spacing(2),
+    right: theme.spacing(3),
   },
 });
 
diff --git a/docs/src/pages/lab/speed-dial/SpeedDials.js b/docs/src/pages/lab/speed-dial/SpeedDials.js
index 81ea1864a59369..89ff801862d0c1 100644
--- a/docs/src/pages/lab/speed-dial/SpeedDials.js
+++ b/docs/src/pages/lab/speed-dial/SpeedDials.js
@@ -22,24 +22,24 @@ const styles = theme => ({
     width: '100%',
   },
   controls: {
-    margin: theme.spacing.unit * 3,
+    margin: theme.spacing(3),
   },
   exampleWrapper: {
     position: 'relative',
     height: 380,
   },
   radioGroup: {
-    margin: `${theme.spacing.unit}px 0`,
+    margin: `${theme.spacing(1)}px 0`,
   },
   speedDial: {
     position: 'absolute',
     '&$directionUp, &$directionLeft': {
-      bottom: theme.spacing.unit * 2,
-      right: theme.spacing.unit * 3,
+      bottom: theme.spacing(2),
+      right: theme.spacing(3),
     },
     '&$directionDown, &$directionRight': {
-      top: theme.spacing.unit * 2,
-      left: theme.spacing.unit * 3,
+      top: theme.spacing(2),
+      left: theme.spacing(3),
     },
   },
   directionUp: {},
diff --git a/docs/src/pages/lab/toggle-button/ToggleButtons.js b/docs/src/pages/lab/toggle-button/ToggleButtons.js
index 5b9970f0ce9b3b..945313a9495ab9 100644
--- a/docs/src/pages/lab/toggle-button/ToggleButtons.js
+++ b/docs/src/pages/lab/toggle-button/ToggleButtons.js
@@ -18,11 +18,11 @@ import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 const styles = theme => ({
   toggleContainer: {
     height: 56,
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    margin: `${theme.spacing.unit}px 0`,
+    margin: `${theme.spacing(1)}px 0`,
     background: theme.palette.background.default,
   },
 });
diff --git a/docs/src/pages/layout/breakpoints/MediaQuery.js b/docs/src/pages/layout/breakpoints/MediaQuery.js
index 7ff33c93faac99..f965a6afad9e0f 100644
--- a/docs/src/pages/layout/breakpoints/MediaQuery.js
+++ b/docs/src/pages/layout/breakpoints/MediaQuery.js
@@ -6,7 +6,7 @@ import green from '@material-ui/core/colors/green';
 
 const styles = theme => ({
   root: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
     [theme.breakpoints.down('sm')]: {
       backgroundColor: theme.palette.secondary.main,
     },
diff --git a/docs/src/pages/layout/breakpoints/breakpoints.md b/docs/src/pages/layout/breakpoints/breakpoints.md
index 03e18823ad94e6..5637e5128cd3f4 100644
--- a/docs/src/pages/layout/breakpoints/breakpoints.md
+++ b/docs/src/pages/layout/breakpoints/breakpoints.md
@@ -35,7 +35,7 @@ In the following demo, we change the background color (red, blue & green) based
 ```jsx
 const styles = theme => ({
   root: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
     [theme.breakpoints.down('sm')]: {
       backgroundColor: theme.palette.secondary.main,
     },
diff --git a/docs/src/pages/layout/grid/AutoGrid.js b/docs/src/pages/layout/grid/AutoGrid.js
index 587380d9fe5f96..849947b73ad43b 100644
--- a/docs/src/pages/layout/grid/AutoGrid.js
+++ b/docs/src/pages/layout/grid/AutoGrid.js
@@ -9,7 +9,7 @@ const styles = theme => ({
     flexGrow: 1,
   },
   paper: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
diff --git a/docs/src/pages/layout/grid/AutoGridNoWrap.js b/docs/src/pages/layout/grid/AutoGridNoWrap.js
index 39b3a9dd961d94..dfd2d722745f55 100644
--- a/docs/src/pages/layout/grid/AutoGridNoWrap.js
+++ b/docs/src/pages/layout/grid/AutoGridNoWrap.js
@@ -10,12 +10,12 @@ const styles = theme => ({
   root: {
     flexGrow: 1,
     overflow: 'hidden',
-    padding: `0 ${theme.spacing.unit * 3}px`,
+    padding: `0 ${theme.spacing(3)}px`,
   },
   paper: {
     maxWidth: 400,
-    margin: `${theme.spacing.unit}px auto`,
-    padding: theme.spacing.unit * 2,
+    margin: `${theme.spacing(1)}px auto`,
+    padding: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/layout/grid/CSSGrid.js b/docs/src/pages/layout/grid/CSSGrid.js
index 0900454771c3e7..93336f84485bca 100644
--- a/docs/src/pages/layout/grid/CSSGrid.js
+++ b/docs/src/pages/layout/grid/CSSGrid.js
@@ -10,17 +10,17 @@ const styles = theme => ({
   container: {
     display: 'grid',
     gridTemplateColumns: 'repeat(12, 1fr)',
-    gridGap: `${theme.spacing.unit * 3}px`,
+    gridGap: `${theme.spacing(3)}px`,
   },
   paper: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
     textAlign: 'center',
     color: theme.palette.text.secondary,
     whiteSpace: 'nowrap',
-    marginBottom: theme.spacing.unit,
+    marginBottom: theme.spacing(1),
   },
   divider: {
-    margin: `${theme.spacing.unit * 2}px 0`,
+    margin: `${theme.spacing(2)}px 0`,
   },
 });
 
diff --git a/docs/src/pages/layout/grid/CenteredGrid.js b/docs/src/pages/layout/grid/CenteredGrid.js
index 23abc2fb02c9e3..a5cf198acc0e57 100644
--- a/docs/src/pages/layout/grid/CenteredGrid.js
+++ b/docs/src/pages/layout/grid/CenteredGrid.js
@@ -9,7 +9,7 @@ const styles = theme => ({
     flexGrow: 1,
   },
   paper: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
diff --git a/docs/src/pages/layout/grid/ComplexGrid.js b/docs/src/pages/layout/grid/ComplexGrid.js
index 2845b71cee7d2b..6e25458d121c64 100644
--- a/docs/src/pages/layout/grid/ComplexGrid.js
+++ b/docs/src/pages/layout/grid/ComplexGrid.js
@@ -11,7 +11,7 @@ const styles = theme => ({
     flexGrow: 1,
   },
   paper: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     margin: 'auto',
     maxWidth: 500,
   },
diff --git a/docs/src/pages/layout/grid/FullWidthGrid.js b/docs/src/pages/layout/grid/FullWidthGrid.js
index 7a645615bf4ff7..5664d56404d6b8 100644
--- a/docs/src/pages/layout/grid/FullWidthGrid.js
+++ b/docs/src/pages/layout/grid/FullWidthGrid.js
@@ -9,7 +9,7 @@ const styles = theme => ({
     flexGrow: 1,
   },
   paper: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
diff --git a/docs/src/pages/layout/grid/InteractiveGrid.js b/docs/src/pages/layout/grid/InteractiveGrid.js
index 69743c883e8240..f0701186c660dc 100644
--- a/docs/src/pages/layout/grid/InteractiveGrid.js
+++ b/docs/src/pages/layout/grid/InteractiveGrid.js
@@ -18,12 +18,12 @@ const styles = theme => ({
     height: 240,
   },
   paper: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     height: '100%',
     color: theme.palette.text.secondary,
   },
   control: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/layout/grid/NestedGrid.js b/docs/src/pages/layout/grid/NestedGrid.js
index 037abda0af18df..08b0747cec2e83 100644
--- a/docs/src/pages/layout/grid/NestedGrid.js
+++ b/docs/src/pages/layout/grid/NestedGrid.js
@@ -9,7 +9,7 @@ const styles = theme => ({
     flexGrow: 1,
   },
   paper: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
diff --git a/docs/src/pages/layout/grid/SpacingGrid.js b/docs/src/pages/layout/grid/SpacingGrid.js
index 5f75e27650a947..3c419995e4e1c6 100644
--- a/docs/src/pages/layout/grid/SpacingGrid.js
+++ b/docs/src/pages/layout/grid/SpacingGrid.js
@@ -17,7 +17,7 @@ const styles = theme => ({
     width: 100,
   },
   control: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 });
 
@@ -68,6 +68,8 @@ class GuttersGrid extends React.Component {
                   <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>
             </Grid>
diff --git a/docs/src/pages/layout/grid/grid.md b/docs/src/pages/layout/grid/grid.md
index 2fcc5359ae2d55..21b6a55f7da100 100644
--- a/docs/src/pages/layout/grid/grid.md
+++ b/docs/src/pages/layout/grid/grid.md
@@ -23,8 +23,11 @@ The grid system is implemented with the `Grid` component:
 ## Spacing
 
 The responsive grid focuses on consistent spacing widths, rather than column width.
-Material design margins and columns follow an **8dp** square baseline grid.
-Spacing can be 8, 16, 24, 32 or 40dp wide.
+Material design margins and columns follow an **8px** square baseline grid.
+The spacing property is an integer in the [0, 8] interval.
+By default, the spacing between two grid items follows a linear function: `output(spacing) = spacing * 8px`, e.g. `spacing={2}` creates a 16px wide gap.
+
+This output transformation function can be customized using the theme, exactly like [the system spacing](/system/spacing/#transformation).
 
 {{"demo": "pages/layout/grid/SpacingGrid.js"}}
 
diff --git a/docs/src/pages/layout/hidden/BreakpointDown.js b/docs/src/pages/layout/hidden/BreakpointDown.js
index 99f5d16ebe1d06..4e3bea2efeaccb 100644
--- a/docs/src/pages/layout/hidden/BreakpointDown.js
+++ b/docs/src/pages/layout/hidden/BreakpointDown.js
@@ -15,11 +15,11 @@ const styles = theme => ({
     display: 'flex',
   },
   paper: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     textAlign: 'center',
     color: theme.palette.text.secondary,
     flex: '1 0 auto',
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/layout/hidden/BreakpointOnly.js b/docs/src/pages/layout/hidden/BreakpointOnly.js
index e184377c76d7a3..0a23fd52ee2ddb 100644
--- a/docs/src/pages/layout/hidden/BreakpointOnly.js
+++ b/docs/src/pages/layout/hidden/BreakpointOnly.js
@@ -15,11 +15,11 @@ const styles = theme => ({
     display: 'flex',
   },
   paper: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     textAlign: 'center',
     color: theme.palette.text.secondary,
     flex: '1 0 auto',
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/layout/hidden/BreakpointUp.js b/docs/src/pages/layout/hidden/BreakpointUp.js
index a7d9d9d0fc1fc1..36fa81596ae487 100644
--- a/docs/src/pages/layout/hidden/BreakpointUp.js
+++ b/docs/src/pages/layout/hidden/BreakpointUp.js
@@ -15,11 +15,11 @@ const styles = theme => ({
     display: 'flex',
   },
   paper: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     textAlign: 'center',
     color: theme.palette.text.secondary,
     flex: '1 0 auto',
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/layout/hidden/GridIntegration.js b/docs/src/pages/layout/hidden/GridIntegration.js
index 37fc501dd62bb2..6526756951cef0 100644
--- a/docs/src/pages/layout/hidden/GridIntegration.js
+++ b/docs/src/pages/layout/hidden/GridIntegration.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     flexGrow: 1,
   },
   paper: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
diff --git a/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/button.js b/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/button.js
index 451f8ac6968eaa..7e2a9b75282142 100644
--- a/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/button.js
+++ b/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/button.js
@@ -21,10 +21,10 @@ export default ({ attach, nest, primary, theme, red, white, BUTTON, ICON }) => (
         fontSize: 20,
       },
       [nest(ICON.left)]: {
-        marginRight: theme.spacing.unit,
+        marginRight: theme.spacing(1),
       },
       [nest(ICON.right)]: {
-        marginLeft: theme.spacing.unit,
+        marginLeft: theme.spacing(1),
       },
     },
     outlined: {
diff --git a/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/icon.js b/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/icon.js
index 91219707373f59..831fc6b2fd0243 100644
--- a/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/icon.js
+++ b/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/icon.js
@@ -12,7 +12,7 @@ export default ({ attach, linked, linkInverted, theme, primary, white, ICON }) =
       fontSize: 18,
     },
     [attach(ICON.contained)]: {
-      padding: theme.spacing.unit / 2,
+      padding: theme.spacing(0.5),
       width: 'calc(1em + 4px)',
       height: 'calc(1em + 4px)',
       borderRadius: '50%',
diff --git a/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/tabs.js b/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/tabs.js
index 57074c85259bbc..51472c3b77b759 100644
--- a/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/tabs.js
+++ b/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/tabs.js
@@ -17,8 +17,8 @@ export default ({ attach, theme, nest, ICON, TAB }) => ({
     root: {
       lineHeight: 'inherit',
       minWidth: 0,
-      marginRight: theme.spacing.unit,
-      marginLeft: theme.spacing.unit,
+      marginRight: theme.spacing(1),
+      marginLeft: theme.spacing(1),
       [theme.breakpoints.up('md')]: {
         minWidth: 0,
         marginRight: 30,
diff --git a/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/typography.js b/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/typography.js
index 59ea0bd98ab5b6..5270cae36a5d94 100644
--- a/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/typography.js
+++ b/docs/src/pages/premium-themes/instapaper/theme/instapaper/components/typography.js
@@ -10,10 +10,10 @@ export default ({ attach, nest, linked, linkInverted, theme, primary, TEXT, ICON
         color: primary.main,
       },
       [attach(TEXT.indented)]: {
-        marginLeft: theme.spacing.unit,
+        marginLeft: theme.spacing(1),
       },
       [attach(TEXT.indentedLg)]: {
-        marginLeft: theme.spacing.unit * 3,
+        marginLeft: theme.spacing(3),
       },
       [attach(TEXT.bold)]: {
         fontWeight: 600,
@@ -29,7 +29,7 @@ export default ({ attach, nest, linked, linkInverted, theme, primary, TEXT, ICON
         display: 'flex',
         alignItems: 'flex-end',
         [nest(ICON.root)]: {
-          marginRight: theme.spacing.unit / 2,
+          marginRight: theme.spacing(0.5),
         },
       },
       [attach(TEXT.lightWeight)]: {
diff --git a/docs/src/pages/premium-themes/onepirate/ForgotPassword.js b/docs/src/pages/premium-themes/onepirate/ForgotPassword.js
index 0319ad71f3f94b..39d8121f60a569 100644
--- a/docs/src/pages/premium-themes/onepirate/ForgotPassword.js
+++ b/docs/src/pages/premium-themes/onepirate/ForgotPassword.js
@@ -16,14 +16,14 @@ import compose from 'docs/src/modules/utils/compose';
 
 const styles = theme => ({
   form: {
-    marginTop: theme.spacing.unit * 6,
+    marginTop: theme.spacing(6),
   },
   button: {
-    marginTop: theme.spacing.unit * 3,
-    marginBottom: theme.spacing.unit * 2,
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(2),
   },
   feedback: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/premium-themes/onepirate/SignIn.js b/docs/src/pages/premium-themes/onepirate/SignIn.js
index 540b88de393741..db7024a51b8cb1 100644
--- a/docs/src/pages/premium-themes/onepirate/SignIn.js
+++ b/docs/src/pages/premium-themes/onepirate/SignIn.js
@@ -17,14 +17,14 @@ import compose from 'docs/src/modules/utils/compose';
 
 const styles = theme => ({
   form: {
-    marginTop: theme.spacing.unit * 6,
+    marginTop: theme.spacing(6),
   },
   button: {
-    marginTop: theme.spacing.unit * 3,
-    marginBottom: theme.spacing.unit * 2,
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(2),
   },
   feedback: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/premium-themes/onepirate/SignUp.js b/docs/src/pages/premium-themes/onepirate/SignUp.js
index 8cac856bf3f739..a262ba8aaa1fac 100644
--- a/docs/src/pages/premium-themes/onepirate/SignUp.js
+++ b/docs/src/pages/premium-themes/onepirate/SignUp.js
@@ -18,14 +18,14 @@ import compose from 'docs/src/modules/utils/compose';
 
 const styles = theme => ({
   form: {
-    marginTop: theme.spacing.unit * 6,
+    marginTop: theme.spacing(6),
   },
   button: {
-    marginTop: theme.spacing.unit * 3,
-    marginBottom: theme.spacing.unit * 2,
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(2),
   },
   feedback: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Button.js b/docs/src/pages/premium-themes/onepirate/modules/components/Button.js
index 436ef1e56ac3b3..964998f7aa456b 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/Button.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/Button.js
@@ -7,7 +7,7 @@ const styles = theme => ({
     borderRadius: 0,
     fontWeight: theme.typography.fontWeightMedium,
     fontFamily: theme.typography.fontFamilySecondary,
-    padding: `${theme.spacing.unit * 2 - 1}px ${theme.spacing.unit * 4}px`,
+    padding: `${theme.spacing(2) - 1}px ${theme.spacing(4)}px`,
     fontSize: theme.typography.pxToRem(14),
     boxShadow: 'none',
     '&:active, &:focus': {
@@ -15,11 +15,11 @@ const styles = theme => ({
     },
   },
   sizeSmall: {
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
+    padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`,
     fontSize: theme.typography.pxToRem(13),
   },
   sizeLarge: {
-    padding: `${theme.spacing.unit * 3 - 3}px ${theme.spacing.unit * 6}px`,
+    padding: `${theme.spacing(3) - 3}px ${theme.spacing(6)}px`,
     fontSize: theme.typography.pxToRem(16),
   },
 });
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js b/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
index 35983dcb1eb1af..989e07cbf3c2a1 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
@@ -10,16 +10,16 @@ function round(value) {
 
 const styles = theme => ({
   margin: {
-    margin: theme.spacing.unit * 7,
+    margin: theme.spacing(7),
   },
   marginBottom: {
-    marginBottom: theme.spacing.unit * 12,
+    marginBottom: theme.spacing(12),
   },
   widthSmall: {
     width: 'auto',
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
-    [theme.breakpoints.up(660 + theme.spacing.unit * 6)]: {
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
+    [theme.breakpoints.up(660 + theme.spacing(6))]: {
       width: 660,
       marginLeft: 'auto',
       marginRight: 'auto',
@@ -27,9 +27,9 @@ const styles = theme => ({
   },
   widthMedium: {
     width: 'auto',
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
-    [theme.breakpoints.up(850 + theme.spacing.unit * 6)]: {
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
+    [theme.breakpoints.up(850 + theme.spacing(6))]: {
       width: 850,
       marginLeft: 'auto',
       marginRight: 'auto',
@@ -37,8 +37,8 @@ const styles = theme => ({
   },
   widthLarge: {
     width: 'auto',
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
     [theme.breakpoints.up('md')]: {
       width: 880,
       marginLeft: 'auto',
@@ -53,8 +53,8 @@ const styles = theme => ({
   },
   widthXlarge: {
     width: 'auto',
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
     [theme.breakpoints.up('md')]: {
       width: 900,
       marginLeft: 'auto',
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Markdown.js b/docs/src/pages/premium-themes/onepirate/modules/components/Markdown.js
index 5b5e418a72bdd6..b462055658c994 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/Markdown.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/Markdown.js
@@ -5,7 +5,7 @@ import Typography from '@material-ui/core/Typography';
 
 const styles = theme => ({
   listItem: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Paper.js b/docs/src/pages/premium-themes/onepirate/modules/components/Paper.js
index 0582b218a40798..3b5b1091ad1aee 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/Paper.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/Paper.js
@@ -16,7 +16,7 @@ const styles = theme => ({
     backgroundColor: theme.palette.secondary.dark,
   },
   padding: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js b/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js
index b8ad2c2522613c..239962568bfb39 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js
@@ -25,14 +25,14 @@ const styles = theme => ({
     alignItems: 'center',
   },
   contentAction: {
-    paddingLeft: theme.spacing.unit * 2,
+    paddingLeft: theme.spacing(2),
   },
   info: {
     flexShrink: 0,
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
   },
   close: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js
index 2b5c5487169498..a537dfc48034e4 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js
@@ -9,11 +9,11 @@ const styles = theme => ({
   root: {
     padding: 0,
     'label + &': {
-      marginTop: theme.spacing.unit * 3,
+      marginTop: theme.spacing(3),
     },
   },
   input: {
-    minWidth: theme.spacing.unit * 6,
+    minWidth: theme.spacing(6),
     backgroundColor: theme.palette.common.white,
     '&$disabled': {
       backgroundColor: theme.palette.divider,
@@ -28,13 +28,13 @@ const styles = theme => ({
   disabled: {},
   inputSizeSmall: {
     fontSize: 14,
-    padding: theme.spacing.unit,
-    width: `calc(100% - ${theme.spacing.unit * 2}px)`,
+    padding: theme.spacing(1),
+    width: `calc(100% - ${theme.spacing(2)}px)`,
   },
   inputSizeMedium: {
     fontSize: 16,
-    padding: theme.spacing.unit * 2,
-    width: `calc(100% - ${theme.spacing.unit * 4}px)`,
+    padding: theme.spacing(2),
+    width: `calc(100% - ${theme.spacing(4)}px)`,
   },
   inputSizeLarge: {
     fontSize: 18,
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Typography.js b/docs/src/pages/premium-themes/onepirate/modules/components/Typography.js
index 6b604be819428b..e8b0e4d256e15e 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/Typography.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/Typography.js
@@ -9,28 +9,28 @@ const styles = theme => ({
     height: 4,
     width: 73,
     display: 'block',
-    margin: `${theme.spacing.unit}px auto 0`,
+    margin: `${theme.spacing(1)}px auto 0`,
     backgroundColor: theme.palette.secondary.main,
   },
   markedH3Center: {
     height: 4,
     width: 55,
     display: 'block',
-    margin: `${theme.spacing.unit}px auto 0`,
+    margin: `${theme.spacing(1)}px auto 0`,
     backgroundColor: theme.palette.secondary.main,
   },
   markedH4Center: {
     height: 4,
     width: 55,
     display: 'block',
-    margin: `${theme.spacing.unit}px auto 0`,
+    margin: `${theme.spacing(1)}px auto 0`,
     backgroundColor: theme.palette.secondary.main,
   },
   markedH6Left: {
     height: 2,
     width: 28,
     display: 'block',
-    marginTop: theme.spacing.unit / 2,
+    marginTop: theme.spacing(0.5),
     background: 'currentColor',
   },
 });
diff --git a/docs/src/pages/premium-themes/onepirate/modules/form/FormFeedback.js b/docs/src/pages/premium-themes/onepirate/modules/form/FormFeedback.js
index 53b0e8e159b17c..7069f09cf928e8 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/form/FormFeedback.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/form/FormFeedback.js
@@ -6,7 +6,7 @@ import Typography from '../components/Typography';
 
 const styles = theme => ({
   root: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
   error: {
     backgroundColor: theme.palette.error.xLight,
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js
index 6fdd537e8a2330..01e46f6ed530da 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js
@@ -28,7 +28,7 @@ const styles = theme => ({
   rightLink: {
     fontSize: 16,
     color: theme.palette.common.white,
-    marginLeft: theme.spacing.unit * 3,
+    marginLeft: theme.spacing(3),
   },
   linkSecondary: {
     color: theme.palette.secondary.main,
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
index 4d3ad786be236d..c74448bfa2c4aa 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
@@ -15,8 +15,8 @@ const styles = theme => ({
     backgroundColor: theme.palette.secondary.light,
   },
   layoutBody: {
-    marginTop: theme.spacing.unit * 8,
-    marginBottom: theme.spacing.unit * 8,
+    marginTop: theme.spacing(8),
+    marginBottom: theme.spacing(8),
     display: 'flex',
   },
   iconsWrapper: {
@@ -32,7 +32,7 @@ const styles = theme => ({
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: theme.palette.warning.main,
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
     '&:hover': {
       backgroundColor: theme.palette.warning.dark,
     },
@@ -43,11 +43,11 @@ const styles = theme => ({
     paddingLeft: 0,
   },
   listItem: {
-    paddingTop: theme.spacing.unit / 2,
-    paddingBottom: theme.spacing.unit / 2,
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
   },
   language: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
     width: 150,
   },
 });
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js
index 88110a61c4c679..026725172d7be4 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js
@@ -11,9 +11,9 @@ const styles = theme => ({
     backgroundRepeat: 'no-repeat',
   },
   paper: {
-    padding: `${theme.spacing.unit * 4}px ${theme.spacing.unit * 3}px`,
+    padding: `${theme.spacing(4)}px ${theme.spacing(3)}px`,
     [theme.breakpoints.up('md')]: {
-      padding: `${theme.spacing.unit * 10}px ${theme.spacing.unit * 8}px`,
+      padding: `${theme.spacing(10)}px ${theme.spacing(8)}px`,
     },
   },
 });
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js
index 2a4d0d8c6362cd..1b83274f205d1e 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js
@@ -11,7 +11,7 @@ import Button from '../components/Button';
 
 const styles = theme => ({
   root: {
-    marginTop: theme.spacing.unit * 10,
+    marginTop: theme.spacing(10),
     marginBottom: 0,
     display: 'flex',
   },
@@ -22,15 +22,15 @@ const styles = theme => ({
     display: 'flex',
     justifyContent: 'center',
     backgroundColor: theme.palette.warning.main,
-    padding: `${theme.spacing.unit * 8}px ${theme.spacing.unit * 3}px`,
+    padding: `${theme.spacing(8)}px ${theme.spacing(3)}px`,
   },
   cardContent: {
     maxWidth: 400,
   },
   textField: {
     width: '100%',
-    marginTop: theme.spacing.unit * 3,
-    marginBottom: theme.spacing.unit * 2,
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(2),
   },
   button: {
     width: '100%',
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.js
index 026d4878a4f19a..800acc3482eadd 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.js
@@ -7,11 +7,11 @@ import Typography from '../components/Typography';
 
 const styles = theme => ({
   root: {
-    marginTop: theme.spacing.unit * 8,
-    marginBottom: theme.spacing.unit * 4,
+    marginTop: theme.spacing(8),
+    marginBottom: theme.spacing(4),
   },
   images: {
-    marginTop: theme.spacing.unit * 8,
+    marginTop: theme.spacing(8),
     display: 'flex',
     flexWrap: 'wrap',
   },
@@ -70,7 +70,7 @@ const styles = theme => ({
   },
   imageTitle: {
     position: 'relative',
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 4}px ${theme.spacing.unit + 6}px`,
+    padding: `${theme.spacing(2)}px ${theme.spacing(4)}px 14px`,
   },
   imageMarked: {
     height: 3,
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.js
index 2ca9ec99566d9e..31fa213d5ad44f 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.js
@@ -19,14 +19,14 @@ const styles = theme => ({
     minWidth: 200,
   },
   h5: {
-    marginBottom: theme.spacing.unit * 4,
-    marginTop: theme.spacing.unit * 4,
+    marginBottom: theme.spacing(4),
+    marginTop: theme.spacing(4),
     [theme.breakpoints.up('sm')]: {
-      marginTop: theme.spacing.unit * 10,
+      marginTop: theme.spacing(10),
     },
   },
   more: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHeroLayout.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHeroLayout.js
index 8af2754d0f3181..7a5a45a773440b 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHeroLayout.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHeroLayout.js
@@ -17,8 +17,8 @@ const styles = theme => ({
     },
   },
   layoutBody: {
-    marginTop: theme.spacing.unit * 3,
-    marginBottom: theme.spacing.unit * 14,
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(14),
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
@@ -45,7 +45,7 @@ const styles = theme => ({
   },
   arrowDown: {
     position: 'absolute',
-    bottom: theme.spacing.unit * 4,
+    bottom: theme.spacing(4),
   },
 });
 
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
index 8e3396363d3d52..5737415420ea2e 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
@@ -14,8 +14,8 @@ const styles = theme => ({
     overflow: 'hidden',
   },
   layoutBody: {
-    marginTop: theme.spacing.unit * 10,
-    marginBottom: theme.spacing.unit * 15,
+    marginTop: theme.spacing(10),
+    marginBottom: theme.spacing(15),
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
@@ -25,10 +25,10 @@ const styles = theme => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: `0px ${theme.spacing.unit * 5}px`,
+    padding: `0px ${theme.spacing(5)}px`,
   },
   title: {
-    marginBottom: theme.spacing.unit * 14,
+    marginBottom: theme.spacing(14),
   },
   number: {
     fontSize: 24,
@@ -38,8 +38,8 @@ const styles = theme => ({
   },
   image: {
     height: 55,
-    marginTop: theme.spacing.unit * 4,
-    marginBottom: theme.spacing.unit * 4,
+    marginTop: theme.spacing(4),
+    marginBottom: theme.spacing(4),
   },
   curvyLines: {
     pointerEvents: 'none',
@@ -48,7 +48,7 @@ const styles = theme => ({
     opacity: 0.7,
   },
   button: {
-    marginTop: theme.spacing.unit * 8,
+    marginTop: theme.spacing(8),
   },
 });
 
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductSmokingHero.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductSmokingHero.js
index 60992bb368caf1..dfe60adde6c4ab 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductSmokingHero.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductSmokingHero.js
@@ -10,18 +10,18 @@ const styles = theme => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    marginTop: theme.spacing.unit * 9,
-    marginBottom: theme.spacing.unit * 9,
+    marginTop: theme.spacing(9),
+    marginBottom: theme.spacing(9),
   },
   button: {
     border: '4px solid currentColor',
     borderRadius: 0,
     height: 'auto',
-    padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 5}px`,
+    padding: `${theme.spacing(2)}px ${theme.spacing(5)}px`,
   },
   link: {
-    marginTop: theme.spacing.unit * 3,
-    marginBottom: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
+    marginBottom: theme.spacing(3),
   },
   buoy: {
     width: 60,
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js
index aa751662675203..52b8aad8a44aa9 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js
@@ -12,8 +12,8 @@ const styles = theme => ({
     backgroundColor: theme.palette.secondary.light,
   },
   layoutBody: {
-    marginTop: theme.spacing.unit * 15,
-    marginBottom: theme.spacing.unit * 30,
+    marginTop: theme.spacing(15),
+    marginBottom: theme.spacing(30),
     display: 'flex',
     position: 'relative',
   },
@@ -21,14 +21,14 @@ const styles = theme => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: `0px ${theme.spacing.unit * 5}px`,
+    padding: `0px ${theme.spacing(5)}px`,
   },
   image: {
     height: 55,
   },
   title: {
-    marginTop: theme.spacing.unit * 5,
-    marginBottom: theme.spacing.unit * 5,
+    marginTop: theme.spacing(5),
+    marginBottom: theme.spacing(5),
   },
   curvyLines: {
     pointerEvents: 'none',
diff --git a/docs/src/pages/premium-themes/paperbase/Content.js b/docs/src/pages/premium-themes/paperbase/Content.js
index 5ce42c7c69aedc..d35bcedcedb5e1 100644
--- a/docs/src/pages/premium-themes/paperbase/Content.js
+++ b/docs/src/pages/premium-themes/paperbase/Content.js
@@ -29,7 +29,7 @@ const styles = theme => ({
     display: 'block',
   },
   addUser: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   contentWrapper: {
     margin: '40px 16px',
diff --git a/docs/src/pages/premium-themes/paperbase/Header.js b/docs/src/pages/premium-themes/paperbase/Header.js
index 3d25c2566ccfb8..fb634955b1e10a 100644
--- a/docs/src/pages/premium-themes/paperbase/Header.js
+++ b/docs/src/pages/premium-themes/paperbase/Header.js
@@ -23,7 +23,7 @@ const styles = theme => ({
     zIndex: 0,
   },
   menuButton: {
-    marginLeft: -theme.spacing.unit,
+    marginLeft: -theme.spacing(1),
   },
   iconButtonAvatar: {
     padding: 4,
diff --git a/docs/src/pages/premium-themes/paperbase/Navigator.js b/docs/src/pages/premium-themes/paperbase/Navigator.js
index cdb5e8e4154d43..494a81a7893cce 100644
--- a/docs/src/pages/premium-themes/paperbase/Navigator.js
+++ b/docs/src/pages/premium-themes/paperbase/Navigator.js
@@ -82,7 +82,7 @@ const styles = theme => ({
   },
   textDense: {},
   divider: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js
index 3a6713c2f02da2..ab80144db42eef 100644
--- a/docs/src/pages/premium-themes/paperbase/Paperbase.js
+++ b/docs/src/pages/premium-themes/paperbase/Paperbase.js
@@ -49,7 +49,7 @@ theme = {
     },
     MuiTabs: {
       root: {
-        marginLeft: theme.spacing.unit,
+        marginLeft: theme.spacing(1),
       },
       indicator: {
         height: 3,
@@ -76,7 +76,7 @@ theme = {
     },
     MuiIconButton: {
       root: {
-        padding: theme.spacing.unit,
+        padding: theme.spacing(1),
       },
     },
     MuiTooltip: {
diff --git a/docs/src/pages/premium-themes/tweeper/pages/tweeper/Profile.js b/docs/src/pages/premium-themes/tweeper/pages/tweeper/Profile.js
index dcd90b551756ce..231b937a7a4826 100644
--- a/docs/src/pages/premium-themes/tweeper/pages/tweeper/Profile.js
+++ b/docs/src/pages/premium-themes/tweeper/pages/tweeper/Profile.js
@@ -19,7 +19,7 @@ const { Tabs, Tab } = molecules;
 
 const Content = styled('div')({
   maxWidth: 1000,
-  padding: theme.spacing.unit * 4,
+  padding: theme.spacing(4),
   margin: 'auto',
 });
 
diff --git a/docs/src/pages/premium-themes/tweeper/theme/tweeper/components/button.js b/docs/src/pages/premium-themes/tweeper/theme/tweeper/components/button.js
index f8a46e4caab003..abb390f33d3670 100644
--- a/docs/src/pages/premium-themes/tweeper/theme/tweeper/components/button.js
+++ b/docs/src/pages/premium-themes/tweeper/theme/tweeper/components/button.js
@@ -8,10 +8,10 @@ export default ({ theme, red, white, attach, nest, BUTTON, ICON }) => ({
         fontSize: 20,
       },
       [nest(ICON.left)]: {
-        marginRight: theme.spacing.unit,
+        marginRight: theme.spacing(1),
       },
       [nest(ICON.right)]: {
-        marginLeft: theme.spacing.unit,
+        marginLeft: theme.spacing(1),
       },
     },
     outlined: {
diff --git a/docs/src/pages/premium-themes/tweeper/theme/tweeper/components/typography.js b/docs/src/pages/premium-themes/tweeper/theme/tweeper/components/typography.js
index 71823ba0977e14..267d8c8dbcca19 100644
--- a/docs/src/pages/premium-themes/tweeper/theme/tweeper/components/typography.js
+++ b/docs/src/pages/premium-themes/tweeper/theme/tweeper/components/typography.js
@@ -8,7 +8,7 @@ export default ({ linked, linkInverted, theme, attach, nest, TEXT, ICON }) => ({
         display: 'inline-block',
       },
       [attach(TEXT.indented)]: {
-        marginLeft: theme.spacing.unit,
+        marginLeft: theme.spacing(1),
       },
       [attach(TEXT.indentedLarge)]: {
         marginLeft: 20,
@@ -27,7 +27,7 @@ export default ({ linked, linkInverted, theme, attach, nest, TEXT, ICON }) => ({
         display: 'flex',
         alignItems: 'flex-end',
         [nest(ICON.root)]: {
-          marginRight: theme.spacing.unit / 2,
+          marginRight: theme.spacing(0.5),
         },
       },
       [attach(TEXT.icon, TEXT.inline)]: {
diff --git a/docs/src/pages/style/color/Color.js b/docs/src/pages/style/color/Color.js
index 9bd4c4e4e73eee..292fbd834ce29e 100644
--- a/docs/src/pages/style/color/Color.js
+++ b/docs/src/pages/style/color/Color.js
@@ -43,7 +43,7 @@ export const styles = theme => ({
   },
   colorGroup: {
     padding: 0,
-    margin: `0 ${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px 0`,
+    margin: `0 ${theme.spacing(2)}px ${theme.spacing(2)}px 0`,
     flexGrow: 1,
     [theme.breakpoints.up('sm')]: {
       flexGrow: 0,
diff --git a/docs/src/pages/style/color/ColorDemo.js b/docs/src/pages/style/color/ColorDemo.js
index 360f0e3b8b3f5d..54e17b1287cc66 100644
--- a/docs/src/pages/style/color/ColorDemo.js
+++ b/docs/src/pages/style/color/ColorDemo.js
@@ -29,15 +29,15 @@ const styles = theme => ({
     marginRight: 20,
   },
   code: {
-    marginTop: theme.spacing.unit,
+    marginTop: theme.spacing(1),
     '& pre': {
       margin: '0px !important',
     },
   },
   fab: {
     position: 'absolute',
-    bottom: theme.spacing.unit * 2,
-    right: theme.spacing.unit * 2,
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/style/color/ColorTool.js b/docs/src/pages/style/color/ColorTool.js
index ef91c7ab888047..107ce5ab18b0ba 100644
--- a/docs/src/pages/style/color/ColorTool.js
+++ b/docs/src/pages/style/color/ColorTool.js
@@ -45,16 +45,16 @@ const styles = theme => ({
   sliderContainer: {
     display: 'flex',
     alignItems: 'center',
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
   },
   slider: {
     width: 'calc(100% - 80px)',
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
+    marginLeft: theme.spacing(3),
+    marginRight: theme.spacing(3),
   },
   colorBar: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
   colorSquare: {
     width: 64,
@@ -64,7 +64,7 @@ const styles = theme => ({
     alignItems: 'center',
   },
   button: {
-    marginLeft: theme.spacing.unit,
+    marginLeft: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/style/icons/FontAwesome.js b/docs/src/pages/style/icons/FontAwesome.js
index 4d124fe78e3f94..1dc5bd42a98dec 100644
--- a/docs/src/pages/style/icons/FontAwesome.js
+++ b/docs/src/pages/style/icons/FontAwesome.js
@@ -13,10 +13,10 @@ const styles = theme => ({
     alignItems: 'flex-end',
   },
   icon: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
   iconHover: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
     '&:hover': {
       color: red[800],
     },
diff --git a/docs/src/pages/style/icons/Icons.js b/docs/src/pages/style/icons/Icons.js
index a916619ac3a484..921bae67b25368 100644
--- a/docs/src/pages/style/icons/Icons.js
+++ b/docs/src/pages/style/icons/Icons.js
@@ -11,10 +11,10 @@ const styles = theme => ({
     alignItems: 'flex-end',
   },
   icon: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
   iconHover: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
     '&:hover': {
       color: red[800],
     },
diff --git a/docs/src/pages/style/icons/SvgIcons.js b/docs/src/pages/style/icons/SvgIcons.js
index 49913ef745df1c..a1acea8d3a84aa 100644
--- a/docs/src/pages/style/icons/SvgIcons.js
+++ b/docs/src/pages/style/icons/SvgIcons.js
@@ -12,10 +12,10 @@ const styles = theme => ({
     alignItems: 'flex-end',
   },
   icon: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
   iconHover: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
     '&:hover': {
       color: red[800],
     },
diff --git a/docs/src/pages/style/icons/SvgMaterialIcons.js b/docs/src/pages/style/icons/SvgMaterialIcons.js
index 98c399b36a4113..24950800d521d8 100644
--- a/docs/src/pages/style/icons/SvgMaterialIcons.js
+++ b/docs/src/pages/style/icons/SvgMaterialIcons.js
@@ -22,7 +22,7 @@ const styles = theme => ({
     color: theme.palette.text.primary,
   },
   icon: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
     fontSize: 32,
   },
 });
diff --git a/docs/src/pages/style/links/Links.js b/docs/src/pages/style/links/Links.js
index 259ba5d478554b..c6ead93fb8c755 100644
--- a/docs/src/pages/style/links/Links.js
+++ b/docs/src/pages/style/links/Links.js
@@ -7,7 +7,7 @@ import Typography from '@material-ui/core/Typography';
 
 const styles = theme => ({
   link: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/style/typography/TypographyTheme.js b/docs/src/pages/style/typography/TypographyTheme.js
index ddfe147e47ef7b..d6b7a52c1746a4 100644
--- a/docs/src/pages/style/typography/TypographyTheme.js
+++ b/docs/src/pages/style/typography/TypographyTheme.js
@@ -6,7 +6,7 @@ const styles = theme => ({
   root: {
     ...theme.typography.button,
     backgroundColor: theme.palette.common.white,
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/utils/click-away-listener/ClickAway.js b/docs/src/pages/utils/click-away-listener/ClickAway.js
index 158cd803bbdfff..1eee7ae41df8d6 100644
--- a/docs/src/pages/utils/click-away-listener/ClickAway.js
+++ b/docs/src/pages/utils/click-away-listener/ClickAway.js
@@ -18,11 +18,11 @@ const styles = theme => ({
   },
   fake: {
     backgroundColor: grey[200],
-    height: theme.spacing.unit,
-    margin: theme.spacing.unit * 2,
+    height: theme.spacing(1),
+    margin: theme.spacing(2),
     // Selects every two elements among any group of siblings.
     '&:nth-child(2n)': {
-      marginRight: theme.spacing.unit * 3,
+      marginRight: theme.spacing(3),
     },
   },
 });
diff --git a/docs/src/pages/utils/modal/SimpleModal.js b/docs/src/pages/utils/modal/SimpleModal.js
index 8e62cb69b0e57c..b3bd9a8728d630 100644
--- a/docs/src/pages/utils/modal/SimpleModal.js
+++ b/docs/src/pages/utils/modal/SimpleModal.js
@@ -23,10 +23,10 @@ function getModalStyle() {
 const styles = theme => ({
   paper: {
     position: 'absolute',
-    width: theme.spacing.unit * 50,
+    width: 400,
     backgroundColor: theme.palette.background.paper,
     boxShadow: theme.shadows[5],
-    padding: theme.spacing.unit * 4,
+    padding: theme.spacing(4),
     outline: 'none',
   },
 });
diff --git a/docs/src/pages/utils/no-ssr/SimpleNoSsr.js b/docs/src/pages/utils/no-ssr/SimpleNoSsr.js
index 3fc6a056625d0c..3747b994775d5b 100644
--- a/docs/src/pages/utils/no-ssr/SimpleNoSsr.js
+++ b/docs/src/pages/utils/no-ssr/SimpleNoSsr.js
@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 const styles = theme => ({
   button: {
     display: 'block',
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/utils/popover/AnchorPlayground.js b/docs/src/pages/utils/popover/AnchorPlayground.js
index bba132d8efca5b..37f5a67273a2c3 100644
--- a/docs/src/pages/utils/popover/AnchorPlayground.js
+++ b/docs/src/pages/utils/popover/AnchorPlayground.js
@@ -18,7 +18,7 @@ import InputLabel from '@material-ui/core/InputLabel';
 const styles = theme => ({
   buttonWrapper: {
     position: 'relative',
-    marginBottom: theme.spacing.unit * 4,
+    marginBottom: theme.spacing(4),
   },
   anchor: {
     backgroundColor: green[500],
@@ -35,7 +35,7 @@ const styles = theme => ({
   },
   checked: {},
   typography: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/utils/popover/MouseOverPopover.js b/docs/src/pages/utils/popover/MouseOverPopover.js
index 03fafedecaf808..13e3cc860eb1ba 100644
--- a/docs/src/pages/utils/popover/MouseOverPopover.js
+++ b/docs/src/pages/utils/popover/MouseOverPopover.js
@@ -9,7 +9,7 @@ const styles = theme => ({
     pointerEvents: 'none',
   },
   paper: {
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
   },
 });
 
diff --git a/docs/src/pages/utils/popover/PopoverPopupState.js b/docs/src/pages/utils/popover/PopoverPopupState.js
index c755d25a72eb43..40ce63d8d1dac4 100644
--- a/docs/src/pages/utils/popover/PopoverPopupState.js
+++ b/docs/src/pages/utils/popover/PopoverPopupState.js
@@ -8,7 +8,7 @@ import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state/in
 
 const styles = theme => ({
   typography: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/utils/popover/RenderPropsPopover.js b/docs/src/pages/utils/popover/RenderPropsPopover.js
index ff8aa84246a6d6..305484cd6446b2 100644
--- a/docs/src/pages/utils/popover/RenderPropsPopover.js
+++ b/docs/src/pages/utils/popover/RenderPropsPopover.js
@@ -11,7 +11,7 @@ const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
 
 const styles = theme => ({
   typography: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/utils/popover/SimplePopover.js b/docs/src/pages/utils/popover/SimplePopover.js
index 67df3e425fc016..e05089bc6437e7 100644
--- a/docs/src/pages/utils/popover/SimplePopover.js
+++ b/docs/src/pages/utils/popover/SimplePopover.js
@@ -7,7 +7,7 @@ import Popover from '@material-ui/core/Popover';
 
 const styles = theme => ({
   typography: {
-    margin: theme.spacing.unit * 2,
+    margin: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/utils/popper/FakedReferencePopper.js b/docs/src/pages/utils/popper/FakedReferencePopper.js
index 992607178309e4..46f78579d7cf4b 100644
--- a/docs/src/pages/utils/popper/FakedReferencePopper.js
+++ b/docs/src/pages/utils/popper/FakedReferencePopper.js
@@ -8,7 +8,7 @@ import Paper from '@material-ui/core/Paper';
 
 const styles = theme => ({
   typography: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/utils/popper/NoTransitionPopper.js b/docs/src/pages/utils/popper/NoTransitionPopper.js
index cffc9d89553988..def43f3a33858d 100644
--- a/docs/src/pages/utils/popper/NoTransitionPopper.js
+++ b/docs/src/pages/utils/popper/NoTransitionPopper.js
@@ -8,7 +8,7 @@ import Paper from '@material-ui/core/Paper';
 
 const styles = theme => ({
   typography: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/utils/popper/PopperPopupState.js b/docs/src/pages/utils/popper/PopperPopupState.js
index 43b8a44afdd203..1f4f86aa01d547 100644
--- a/docs/src/pages/utils/popper/PopperPopupState.js
+++ b/docs/src/pages/utils/popper/PopperPopupState.js
@@ -10,7 +10,7 @@ import Paper from '@material-ui/core/Paper';
 
 const styles = theme => ({
   typography: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/utils/popper/PositionedPopper.js b/docs/src/pages/utils/popper/PositionedPopper.js
index e69b1db2b6c143..fb2c5a6bc6b55d 100644
--- a/docs/src/pages/utils/popper/PositionedPopper.js
+++ b/docs/src/pages/utils/popper/PositionedPopper.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     width: 500,
   },
   typography: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/utils/popper/RenderPropsPopper.js b/docs/src/pages/utils/popper/RenderPropsPopper.js
index 33ca8ead74ffb3..25c4d48da37706 100644
--- a/docs/src/pages/utils/popper/RenderPropsPopper.js
+++ b/docs/src/pages/utils/popper/RenderPropsPopper.js
@@ -13,7 +13,7 @@ const WithState = toRenderProps(withState('anchorEl', 'updateAnchorEl', null));
 
 const styles = theme => ({
   typography: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/utils/popper/ScrollPlayground.js b/docs/src/pages/utils/popper/ScrollPlayground.js
index 718bd1569bfdce..3f805f8d6cebca 100644
--- a/docs/src/pages/utils/popper/ScrollPlayground.js
+++ b/docs/src/pages/utils/popper/ScrollPlayground.js
@@ -23,7 +23,7 @@ const styles = theme => ({
   scrollContainer: {
     height: 400,
     overflow: 'auto',
-    marginBottom: theme.spacing.unit * 3,
+    marginBottom: theme.spacing(3),
   },
   scroll: {
     position: 'relative',
@@ -32,7 +32,7 @@ const styles = theme => ({
     height: '230%',
   },
   legend: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
     maxWidth: 300,
   },
   paper: {
diff --git a/docs/src/pages/utils/popper/SimplePopper.js b/docs/src/pages/utils/popper/SimplePopper.js
index adbe4d421a5a8f..99e0adb0da5670 100644
--- a/docs/src/pages/utils/popper/SimplePopper.js
+++ b/docs/src/pages/utils/popper/SimplePopper.js
@@ -9,7 +9,7 @@ import Paper from '@material-ui/core/Paper';
 
 const styles = theme => ({
   typography: {
-    padding: theme.spacing.unit * 2,
+    padding: theme.spacing(2),
   },
 });
 
diff --git a/docs/src/pages/utils/portal/SimplePortal.js b/docs/src/pages/utils/portal/SimplePortal.js
index 09d08f152864d6..eb915b5ca56bd1 100644
--- a/docs/src/pages/utils/portal/SimplePortal.js
+++ b/docs/src/pages/utils/portal/SimplePortal.js
@@ -7,8 +7,8 @@ import { withStyles } from '@material-ui/core/styles';
 
 const styles = theme => ({
   alert: {
-    padding: theme.spacing.unit,
-    margin: `${theme.spacing.unit}px 0`,
+    padding: theme.spacing(1),
+    margin: `${theme.spacing(1)}px 0`,
     border: '1px solid',
     borderColor: theme.palette.text.primary,
   },
diff --git a/docs/src/pages/utils/transitions/SimpleCollapse.js b/docs/src/pages/utils/transitions/SimpleCollapse.js
index 13460b73e9f769..fcc0bddafc9ad7 100644
--- a/docs/src/pages/utils/transitions/SimpleCollapse.js
+++ b/docs/src/pages/utils/transitions/SimpleCollapse.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     display: 'flex',
   },
   paper: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   svg: {
     width: 100,
diff --git a/docs/src/pages/utils/transitions/SimpleFade.js b/docs/src/pages/utils/transitions/SimpleFade.js
index e1ca5369e85988..517ec932b36ed2 100644
--- a/docs/src/pages/utils/transitions/SimpleFade.js
+++ b/docs/src/pages/utils/transitions/SimpleFade.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     display: 'flex',
   },
   paper: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   svg: {
     width: 100,
diff --git a/docs/src/pages/utils/transitions/SimpleGrow.js b/docs/src/pages/utils/transitions/SimpleGrow.js
index b04372ba9fbe61..81da82daad8662 100644
--- a/docs/src/pages/utils/transitions/SimpleGrow.js
+++ b/docs/src/pages/utils/transitions/SimpleGrow.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     display: 'flex',
   },
   paper: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   svg: {
     width: 100,
diff --git a/docs/src/pages/utils/transitions/SimpleSlide.js b/docs/src/pages/utils/transitions/SimpleSlide.js
index cc6414cdde1ba0..e3a30eef552b4a 100644
--- a/docs/src/pages/utils/transitions/SimpleSlide.js
+++ b/docs/src/pages/utils/transitions/SimpleSlide.js
@@ -10,12 +10,12 @@ const styles = theme => ({
     height: 180,
   },
   wrapper: {
-    width: 100 + theme.spacing.unit * 2,
+    width: 100 + theme.spacing(2),
   },
   paper: {
     zIndex: 1,
     position: 'relative',
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   svg: {
     width: 100,
diff --git a/docs/src/pages/utils/transitions/SimpleZoom.js b/docs/src/pages/utils/transitions/SimpleZoom.js
index f83b20b0cbdf35..16e7abc871facc 100644
--- a/docs/src/pages/utils/transitions/SimpleZoom.js
+++ b/docs/src/pages/utils/transitions/SimpleZoom.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     display: 'flex',
   },
   paper: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
   svg: {
     width: 100,
diff --git a/examples/cdn-next/index.html b/examples/cdn-next/index.html
index bc765acbb4dbb5..7532fa337ff486 100644
--- a/examples/cdn-next/index.html
+++ b/examples/cdn-next/index.html
@@ -51,10 +51,10 @@
 const styles = theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
   icon: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
 });
 
diff --git a/examples/create-react-app-with-flow/src/pages/index.js b/examples/create-react-app-with-flow/src/pages/index.js
index 795fc0bc80d867..d47054e2e38004 100644
--- a/examples/create-react-app-with-flow/src/pages/index.js
+++ b/examples/create-react-app-with-flow/src/pages/index.js
@@ -14,7 +14,7 @@ import withRoot from '../withRoot';
 const styles = (theme: Object) => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 });
 
diff --git a/examples/create-react-app-with-jss/src/pages/index.js b/examples/create-react-app-with-jss/src/pages/index.js
index dedfb39432f7d8..bbc676fd34c881 100644
--- a/examples/create-react-app-with-jss/src/pages/index.js
+++ b/examples/create-react-app-with-jss/src/pages/index.js
@@ -13,7 +13,7 @@ import withRoot from '../withRoot';
 const styles = theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 });
 
diff --git a/examples/create-react-app-with-typescript/src/pages/index.tsx b/examples/create-react-app-with-typescript/src/pages/index.tsx
index 147f5324b74a12..647ef77b2455d2 100644
--- a/examples/create-react-app-with-typescript/src/pages/index.tsx
+++ b/examples/create-react-app-with-typescript/src/pages/index.tsx
@@ -15,7 +15,7 @@ const styles = (theme: Theme) =>
   createStyles({
     root: {
       textAlign: 'center',
-      paddingTop: theme.spacing.unit * 20,
+      paddingTop: theme.spacing(20),
     },
   });
 
diff --git a/examples/create-react-app/src/pages/index.js b/examples/create-react-app/src/pages/index.js
index dedfb39432f7d8..bbc676fd34c881 100644
--- a/examples/create-react-app/src/pages/index.js
+++ b/examples/create-react-app/src/pages/index.js
@@ -13,7 +13,7 @@ import withRoot from '../withRoot';
 const styles = theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 });
 
diff --git a/examples/gatsby/src/pages/about.js b/examples/gatsby/src/pages/about.js
index 3ba75a867ab63d..0f73d65271ab7d 100644
--- a/examples/gatsby/src/pages/about.js
+++ b/examples/gatsby/src/pages/about.js
@@ -9,7 +9,7 @@ import withRoot from '../withRoot';
 const styles = theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 });
 
diff --git a/examples/gatsby/src/pages/index.js b/examples/gatsby/src/pages/index.js
index 3ac59a5f63f098..bc160f7b60c764 100644
--- a/examples/gatsby/src/pages/index.js
+++ b/examples/gatsby/src/pages/index.js
@@ -14,7 +14,7 @@ import withRoot from '../withRoot';
 const styles = theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 });
 
diff --git a/examples/nextjs-hooks-with-typescript/pages/about.tsx b/examples/nextjs-hooks-with-typescript/pages/about.tsx
index 5ce60cb0f57292..d62c8cc287a008 100644
--- a/examples/nextjs-hooks-with-typescript/pages/about.tsx
+++ b/examples/nextjs-hooks-with-typescript/pages/about.tsx
@@ -9,7 +9,7 @@ import Link from 'next/link';
 const useStyles = makeStyles(theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 }));
 
diff --git a/examples/nextjs-hooks-with-typescript/pages/index.tsx b/examples/nextjs-hooks-with-typescript/pages/index.tsx
index b712cd363545f7..63c36d96fc46a2 100644
--- a/examples/nextjs-hooks-with-typescript/pages/index.tsx
+++ b/examples/nextjs-hooks-with-typescript/pages/index.tsx
@@ -14,7 +14,7 @@ import Link from 'next/link';
 const useStyles = makeStyles(theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 }));
 
diff --git a/examples/nextjs-hooks/pages/about.js b/examples/nextjs-hooks/pages/about.js
index 08e63061c15b5b..b7494c880d0e16 100644
--- a/examples/nextjs-hooks/pages/about.js
+++ b/examples/nextjs-hooks/pages/about.js
@@ -10,7 +10,7 @@ import Link from 'next/link';
 const useStyles = makeStyles(theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 }));
 
diff --git a/examples/nextjs-hooks/pages/index.js b/examples/nextjs-hooks/pages/index.js
index 97a310183601eb..386d3d555ceac7 100644
--- a/examples/nextjs-hooks/pages/index.js
+++ b/examples/nextjs-hooks/pages/index.js
@@ -15,7 +15,7 @@ import Link from 'next/link';
 const useStyles = makeStyles(theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 }));
 
diff --git a/examples/nextjs/pages/about.js b/examples/nextjs/pages/about.js
index fb7ebd2578b888..5c25c375676a55 100644
--- a/examples/nextjs/pages/about.js
+++ b/examples/nextjs/pages/about.js
@@ -10,7 +10,7 @@ import Link from 'next/link';
 const styles = theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 });
 
diff --git a/examples/nextjs/pages/index.js b/examples/nextjs/pages/index.js
index be9e8d8b0ca671..519fb719d48f4a 100644
--- a/examples/nextjs/pages/index.js
+++ b/examples/nextjs/pages/index.js
@@ -15,7 +15,7 @@ import Link from 'next/link';
 const styles = theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 });
 
diff --git a/examples/parcel/src/pages/index.js b/examples/parcel/src/pages/index.js
index dedfb39432f7d8..bbc676fd34c881 100644
--- a/examples/parcel/src/pages/index.js
+++ b/examples/parcel/src/pages/index.js
@@ -13,7 +13,7 @@ import withRoot from '../withRoot';
 const styles = theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 });
 
diff --git a/examples/ssr/App.js b/examples/ssr/App.js
index 60940ce238a6da..94c5bb5501006a 100644
--- a/examples/ssr/App.js
+++ b/examples/ssr/App.js
@@ -12,7 +12,7 @@ import { withStyles } from '@material-ui/core/styles';
 const styles = theme => ({
   root: {
     textAlign: 'center',
-    paddingTop: theme.spacing.unit * 20,
+    paddingTop: theme.spacing(20),
   },
 });
 
diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
index 1058392f263a6c..7efd2a8cf6f684 100644
--- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
+++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
@@ -14,7 +14,7 @@ export const styles = theme => ({
     height: 32,
     minWidth: 48,
     margin: 0,
-    padding: `${theme.spacing.unit - 4}px ${theme.spacing.unit * 1.5}px`,
+    padding: '4px 12px',
     borderRadius: 2,
     color: fade(theme.palette.action.active, 0.38),
     '&$selected': {
diff --git a/packages/material-ui-styles/test/styles.spec.tsx b/packages/material-ui-styles/test/styles.spec.tsx
index a737b03fdd5b5f..53728d546b9e11 100644
--- a/packages/material-ui-styles/test/styles.spec.tsx
+++ b/packages/material-ui-styles/test/styles.spec.tsx
@@ -13,7 +13,7 @@ import { Theme } from '@material-ui/core/styles';
 // Example 1
 const styles = ({ palette, spacing }: Theme) => ({
   root: {
-    padding: spacing.unit,
+    padding: spacing(1),
     backgroundColor: palette.background.default,
     color: palette.primary.dark,
   },
@@ -67,7 +67,7 @@ const AnotherStyledSFC = withStyles({
 
 // withTheme
 const ComponentWithTheme = withTheme<Theme>()(({ theme }: WithTheme<Theme>) => (
-  <div>{theme.spacing.unit}</div>
+  <div>{theme.spacing(1)}</div>
 ));
 
 <ComponentWithTheme />;
@@ -107,7 +107,7 @@ declare const themed: boolean;
   const Foo = withStyles(themedStyles, { withTheme: true })(
     class extends React.Component<WithTheme<Theme>> {
       render() {
-        return <div style={{ margin: this.props.theme.spacing.unit }} />;
+        return <div style={{ margin: this.props.theme.spacing(1) }} />;
       }
     },
   );
@@ -115,7 +115,7 @@ declare const themed: boolean;
 
   const Bar = withStyles(themedStyles, { withTheme: true })(
     ({ theme }: WithStyles<typeof themedStyles, true>) => (
-      <div style={{ margin: theme.spacing.unit }} />
+      <div style={{ margin: theme.spacing(1) }} />
     ),
   );
   <Bar />;
@@ -195,7 +195,7 @@ withStyles(theme =>
 
       inset: {
         '&:first-child': {
-          paddingLeft: theme.spacing.unit * 7,
+          paddingLeft: theme.spacing(7),
         },
       },
       row: {
diff --git a/packages/material-ui-system/src/spacing.js b/packages/material-ui-system/src/spacing.js
index f8a7c628760366..92c5518f4c6ba8 100644
--- a/packages/material-ui-system/src/spacing.js
+++ b/packages/material-ui-system/src/spacing.js
@@ -61,36 +61,35 @@ const spacingKeys = [
 ];
 
 function getTransformer(theme) {
-  const themeTransformer =
-    theme.spacing && theme.spacing.unit != null ? theme.spacing.unit : theme.spacing || 8;
+  const themeSpacing = theme.spacing || 8;
 
-  if (typeof themeTransformer === 'number') {
-    return abs => themeTransformer * abs;
+  if (typeof themeSpacing === 'number') {
+    return abs => themeSpacing * abs;
   }
 
-  if (Array.isArray(themeTransformer)) {
+  if (Array.isArray(themeSpacing)) {
     return abs => {
       warning(
-        abs <= themeTransformer.length - 1,
+        abs <= themeSpacing.length - 1,
         [
           `@material-ui/system: the value provided (${abs}) overflows.`,
-          `The supported values are: ${JSON.stringify(themeTransformer)}.`,
-          `${abs} > ${themeTransformer.length - 1}, you need to add the missing values.`,
+          `The supported values are: ${JSON.stringify(themeSpacing)}.`,
+          `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`,
         ].join('\n'),
       );
 
-      return themeTransformer[abs];
+      return themeSpacing[abs];
     };
   }
 
-  if (typeof themeTransformer === 'function') {
-    return themeTransformer;
+  if (typeof themeSpacing === 'function') {
+    return themeSpacing;
   }
 
   warning(
     false,
     [
-      `@material-ui/system: the \`theme.spacing\` value (${themeTransformer}) is invalid.`,
+      `@material-ui/system: the \`theme.spacing\` value (${themeSpacing}) is invalid.`,
       'It should be a number, an array or a function.',
     ].join('\n'),
   );
diff --git a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js
index ec25b767b979f0..dfe05f2e10af03 100644
--- a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js
+++ b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js
@@ -14,8 +14,8 @@ const styles = theme => ({
     backgroundColor: theme.palette.grey[100],
     color: theme.palette.grey[700],
     borderRadius: 2,
-    marginLeft: theme.spacing.unit / 2,
-    marginRight: theme.spacing.unit / 2,
+    marginLeft: theme.spacing(0.5),
+    marginRight: theme.spacing(0.5),
     cursor: 'pointer',
     '&:hover, &:focus': {
       backgroundColor: theme.palette.grey[200],
diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
index 69681c82bd47cc..b65de9757c73e7 100644
--- a/packages/material-ui/src/Divider/Divider.js
+++ b/packages/material-ui/src/Divider/Divider.js
@@ -31,8 +31,8 @@ export const styles = theme => ({
   },
   /* Styles applied to the root element if `variant="middle"`. */
   middle: {
-    marginLeft: theme.spacing.unit * 2,
-    marginRight: theme.spacing.unit * 2,
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2),
   },
 });
 
diff --git a/packages/material-ui/src/Grid/Grid.d.ts b/packages/material-ui/src/Grid/Grid.d.ts
index 92c84800670757..46ef7393510937 100644
--- a/packages/material-ui/src/Grid/Grid.d.ts
+++ b/packages/material-ui/src/Grid/Grid.d.ts
@@ -14,7 +14,7 @@ export type GridContentAlignment =
 
 export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 
-export type GridSpacing = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 
 export type GridJustification =
   | 'flex-start'
diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js
index 428d32d4d02bcd..8eef81a8a34170 100644
--- a/packages/material-ui/src/Grid/Grid.js
+++ b/packages/material-ui/src/Grid/Grid.js
@@ -17,7 +17,7 @@ import withStyles from '../styles/withStyles';
 import { keys as breakpointKeys } from '../styles/createBreakpoints';
 import requirePropFactory from '../utils/requirePropFactory';
 
-const GUTTERS = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 
 function generateGrid(globalStyles, theme, breakpoint) {
@@ -68,14 +68,13 @@ function generateGrid(globalStyles, theme, breakpoint) {
 function generateGutter(theme, breakpoint) {
   const styles = {};
 
-  GUTTERS.forEach((spacing, index) => {
-    if (index === 0) {
-      // Skip the default style.
+  SPACINGS.forEach(spacing => {
+    const themeSpacing = theme.spacing(spacing);
+
+    if (themeSpacing === 0) {
       return;
     }
 
-    const themeSpacing = spacing * theme.spacing.unit;
-
     styles[`spacing-${breakpoint}-${spacing}`] = {
       margin: -themeSpacing / 2,
       width: `calc(100% + ${themeSpacing}px)`,
@@ -324,7 +323,7 @@ Grid.propTypes = {
    * Defines the space between the type `item` component.
    * It can only be used on a type `container` component.
    */
-  spacing: PropTypes.oneOf(GUTTERS),
+  spacing: PropTypes.oneOf(SPACINGS),
   /**
    * Defines the `flex-wrap` style property.
    * It's applied for all screen sizes.
diff --git a/packages/material-ui/src/styles/createMixins.d.ts b/packages/material-ui/src/styles/createMixins.d.ts
index 223183f3842180..e0dfd0e17e6272 100644
--- a/packages/material-ui/src/styles/createMixins.d.ts
+++ b/packages/material-ui/src/styles/createMixins.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Breakpoints } from './createBreakpoints';
-import { Spacing } from './spacing';
+import { Spacing } from './createSpacing';
 import { StyleRules } from '../styles';
 import { CSSProperties } from './withStyles';
 
diff --git a/packages/material-ui/src/styles/createMixins.js b/packages/material-ui/src/styles/createMixins.js
index 9e937f546796cb..8cb0b9e5e3ba7e 100644
--- a/packages/material-ui/src/styles/createMixins.js
+++ b/packages/material-ui/src/styles/createMixins.js
@@ -1,12 +1,12 @@
 export default function createMixins(breakpoints, spacing, mixins) {
   return {
     gutters: (styles = {}) => ({
-      paddingLeft: spacing.unit * 2,
-      paddingRight: spacing.unit * 2,
+      paddingLeft: spacing(2),
+      paddingRight: spacing(2),
       ...styles,
       [breakpoints.up('sm')]: {
-        paddingLeft: spacing.unit * 3,
-        paddingRight: spacing.unit * 3,
+        paddingLeft: spacing(3),
+        paddingRight: spacing(3),
         ...styles[breakpoints.up('sm')],
       },
     }),
diff --git a/packages/material-ui/src/styles/createMuiTheme.d.ts b/packages/material-ui/src/styles/createMuiTheme.d.ts
index 99aeb4ba24080b..0f0c49d6ffb151 100644
--- a/packages/material-ui/src/styles/createMuiTheme.d.ts
+++ b/packages/material-ui/src/styles/createMuiTheme.d.ts
@@ -4,7 +4,7 @@ import { Palette, PaletteOptions } from './createPalette';
 import { Typography, TypographyOptions } from './createTypography';
 import { Shadows } from './shadows';
 import { Shape, ShapeOptions } from './shape';
-import { Spacing, SpacingOptions } from './spacing';
+import { Spacing, SpacingOptions } from './createSpacing';
 import { Transitions, TransitionsOptions } from './transitions';
 import { ZIndex, ZIndexOptions } from './zIndex';
 import { Overrides } from './overrides';
diff --git a/packages/material-ui/src/styles/createMuiTheme.js b/packages/material-ui/src/styles/createMuiTheme.js
index 236ba43ebea9bc..f0c730ab62cce6 100644
--- a/packages/material-ui/src/styles/createMuiTheme.js
+++ b/packages/material-ui/src/styles/createMuiTheme.js
@@ -7,7 +7,7 @@ import createPalette from './createPalette';
 import createTypography from './createTypography';
 import shadows from './shadows';
 import shape from './shape';
-import defaultSpacing from './spacing';
+import createSpacing from './createSpacing';
 import transitions from './transitions';
 import zIndex from './zIndex';
 
@@ -17,14 +17,14 @@ function createMuiTheme(options = {}) {
     mixins: mixinsInput = {},
     palette: paletteInput = {},
     shadows: shadowsInput,
-    spacing: spacingInput = {},
+    spacing: spacingInput,
     typography: typographyInput = {},
     ...other
   } = options;
 
   const palette = createPalette(paletteInput);
   const breakpoints = createBreakpoints(breakpointsInput);
-  const spacing = { ...defaultSpacing, ...spacingInput };
+  const spacing = createSpacing(spacingInput);
 
   const muiTheme = {
     breakpoints,
@@ -35,10 +35,10 @@ function createMuiTheme(options = {}) {
     props: {}, // Inject custom properties
     shadows: shadowsInput || shadows,
     typography: createTypography(palette, typographyInput),
+    spacing,
     ...deepmerge(
       {
         shape,
-        spacing,
         transitions,
         zIndex,
       },
diff --git a/packages/material-ui/src/styles/createMuiTheme.test.js b/packages/material-ui/src/styles/createMuiTheme.test.js
index df758ca208ff14..ec47e267dcfa70 100644
--- a/packages/material-ui/src/styles/createMuiTheme.test.js
+++ b/packages/material-ui/src/styles/createMuiTheme.test.js
@@ -23,10 +23,10 @@ describe('createMuiTheme', () => {
     assert.notStrictEqual(muiTheme.transitions.duration.shorter, undefined);
   });
 
-  it('should use the defined spacing unit for the gutters mixin', () => {
-    const unit = 100;
-    const muiTheme = createMuiTheme({ spacing: { unit } });
-    assert.strictEqual(muiTheme.mixins.gutters().paddingLeft, unit * 2);
+  it('should use the defined spacing for the gutters mixin', () => {
+    const spacing = 100;
+    const muiTheme = createMuiTheme({ spacing });
+    assert.strictEqual(muiTheme.mixins.gutters().paddingLeft, spacing * 2);
   });
 
   describe('shadows', () => {
diff --git a/packages/material-ui/src/styles/createSpacing.d.ts b/packages/material-ui/src/styles/createSpacing.d.ts
new file mode 100644
index 00000000000000..6ed4c1b253f9f3
--- /dev/null
+++ b/packages/material-ui/src/styles/createSpacing.d.ts
@@ -0,0 +1,5 @@
+export type Spacing = (value: number | string) => number | string;
+
+export type SpacingOptions = number | Spacing;
+
+export default function createSpacing(spacing: SpacingOptions): Spacing;
diff --git a/packages/material-ui/src/styles/createSpacing.js b/packages/material-ui/src/styles/createSpacing.js
new file mode 100644
index 00000000000000..da35f8b45bae87
--- /dev/null
+++ b/packages/material-ui/src/styles/createSpacing.js
@@ -0,0 +1,48 @@
+import warning from 'warning';
+
+let warnOnce = false;
+
+// Same logic as /packages/material-ui-system/src/spacing.js
+export default function createSpacing(spacing) {
+  // All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
+  // https://material.io/design/layout/understanding-layout.html#pixel-density
+  const themeSpacing = spacing || 8;
+  let output;
+
+  if (typeof themeSpacing === 'number') {
+    output = value => themeSpacing * value;
+  } else if (typeof themeSpacing === 'function') {
+    output = themeSpacing;
+  } else {
+    warning(
+      false,
+      [
+        `Material-UI: the \`theme.spacing\` value (${themeSpacing}) is invalid.`,
+        'It should be a number or a function.',
+      ].join('\n'),
+    );
+    output = value => themeSpacing * value;
+  }
+
+  if (!output.hasOwnProperty('unit')) {
+    // To remove in v5
+    Object.defineProperty(output, 'unit', {
+      get: () => {
+        if (process.env.NODE_ENV !== 'production') {
+          warning(
+            warnOnce && process.env.NODE_ENV !== 'test',
+            [
+              'Material-UI: theme.spacing.unit usage has been deprecated.',
+              'It will be removed in v5.',
+              'You can replace theme.spacing.unit * 2 with theme.spacing(2).',
+            ].join('\n'),
+          );
+          warnOnce = true;
+        }
+        return themeSpacing;
+      },
+    });
+  }
+
+  return output;
+}
diff --git a/packages/material-ui/src/styles/createSpacing.test.js b/packages/material-ui/src/styles/createSpacing.test.js
new file mode 100644
index 00000000000000..961d757fbc54ce
--- /dev/null
+++ b/packages/material-ui/src/styles/createSpacing.test.js
@@ -0,0 +1,39 @@
+import { assert } from 'chai';
+import createSpacing from './createSpacing';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
+
+describe('createSpacing', () => {
+  it('should work as expected', () => {
+    let spacing;
+    spacing = createSpacing();
+    assert.strictEqual(spacing(1), 8);
+    spacing = createSpacing(10);
+    assert.strictEqual(spacing(1), 10);
+    spacing = createSpacing(value => [0, 8, 16][value]);
+    assert.strictEqual(spacing(2), 16);
+    spacing = createSpacing(value => value ** 2);
+    assert.strictEqual(spacing(2), 4);
+  });
+
+  it('should support recursion', () => {
+    const spacing = createSpacing();
+    createSpacing(spacing);
+  });
+
+  describe('v4 deprecation', () => {
+    before(() => {
+      consoleErrorMock.spy();
+    });
+
+    after(() => {
+      consoleErrorMock.reset();
+    });
+
+    it('should warn for the deprecated API', () => {
+      const spacing = createSpacing(11);
+      assert.strictEqual(spacing.unit, 11);
+      assert.strictEqual(consoleErrorMock.callCount(), 1);
+      assert.include(consoleErrorMock.args()[0][0], 'theme.spacing.unit usage has been deprecated');
+    });
+  });
+});
diff --git a/packages/material-ui/src/styles/createStyles.test.js b/packages/material-ui/src/styles/createStyles.test.js
index d91cd017e1888c..80dda68d07bdde 100644
--- a/packages/material-ui/src/styles/createStyles.test.js
+++ b/packages/material-ui/src/styles/createStyles.test.js
@@ -1,5 +1,5 @@
 import { assert } from 'chai';
-import { createStyles } from '.';
+import createStyles from './createStyles';
 
 describe('createStyles', () => {
   it('is the identity function', () => {
diff --git a/packages/material-ui/src/styles/spacing.d.ts b/packages/material-ui/src/styles/spacing.d.ts
deleted file mode 100644
index 515159d5f671a4..00000000000000
--- a/packages/material-ui/src/styles/spacing.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface Spacing {
-  unit: number;
-}
-
-export type SpacingOptions = Partial<Spacing>;
-
-declare const spacing: Spacing;
-
-export default spacing;
diff --git a/packages/material-ui/src/styles/spacing.js b/packages/material-ui/src/styles/spacing.js
deleted file mode 100644
index c1bcffbb7cd85c..00000000000000
--- a/packages/material-ui/src/styles/spacing.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const spacing = {
-  // All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
-  // https://material.io/design/layout/understanding-layout.html#pixel-density
-  unit: 8,
-};
-
-export default spacing;
diff --git a/packages/material-ui/src/styles/withStyles.test.js b/packages/material-ui/src/styles/withStyles.test.js
index a4fca358b9d3e7..2d4b012f1ea71c 100644
--- a/packages/material-ui/src/styles/withStyles.test.js
+++ b/packages/material-ui/src/styles/withStyles.test.js
@@ -205,7 +205,7 @@ describe('withStyles', () => {
     });
 
     it('should work when depending on a theme', () => {
-      const styles = theme => ({ root: { padding: theme.spacing.unit } });
+      const styles = theme => ({ root: { padding: theme.spacing(1) } });
       const StyledComponent = withStyles(styles, { name: 'MuiTextField' })(Empty);
 
       const wrapper = mount(
diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
index cfc805a1047c8f..c627936a859a34 100644
--- a/packages/material-ui/test/typescript/components.spec.tsx
+++ b/packages/material-ui/test/typescript/components.spec.tsx
@@ -661,7 +661,7 @@ const TableTest = () => {
     return createStyles({
       paper: {
         width: '100%',
-        marginTop: theme.spacing.unit * 3,
+        marginTop: theme.spacing(3),
         backgroundColor,
         overflowX: 'auto',
       },
@@ -737,7 +737,7 @@ const TabsTest = () => {
   const styles: StyleRulesCallback<ClassKey> = theme => ({
     root: {
       flexGrow: 1,
-      marginTop: theme.spacing.unit * 3,
+      marginTop: theme.spacing(3),
       backgroundColor: theme.palette.background.paper,
     },
     button: {
diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx
index 2cca6c666cd68e..9ef84d620b8d7e 100644
--- a/packages/material-ui/test/typescript/styles.spec.tsx
+++ b/packages/material-ui/test/typescript/styles.spec.tsx
@@ -25,7 +25,7 @@ interface ComponentProps extends WithStyles<typeof styles> {
 // Example 1
 const styles = ({ palette, spacing }: Theme) => ({
   root: {
-    padding: spacing.unit,
+    padding: spacing(1),
     backgroundColor: palette.background.default,
     color: palette.primary.dark,
   },
@@ -102,7 +102,7 @@ const theme = createMuiTheme({
       short: 50,
     },
   },
-  spacing: {},
+  spacing: 5,
   zIndex: {
     appBar: 42,
   },
@@ -162,7 +162,7 @@ function OverridesTheme() {
 }
 
 // withTheme
-const ComponentWithTheme = withTheme()(({ theme }: WithTheme) => <div>{theme.spacing.unit}</div>);
+const ComponentWithTheme = withTheme()(({ theme }: WithTheme) => <div>{theme.spacing(1)}</div>);
 
 <ComponentWithTheme />;
 
@@ -203,14 +203,14 @@ declare const themed: boolean;
       }
 
       render() {
-        return <div style={{ margin: this.props.theme.spacing.unit }} />;
+        return <div style={{ margin: this.props.theme.spacing(1) }} />;
       }
     },
   );
   <Foo />;
 
   const Bar = withStyles({}, { withTheme: true })(({ theme }: WithStyles<string, true>) => (
-    <div style={{ margin: theme.spacing.unit }} />
+    <div style={{ margin: theme.spacing(1) }} />
   ));
   <Bar />;
 }
@@ -288,7 +288,7 @@ withStyles(theme =>
       },
       inset: {
         '&:first-child': {
-          paddingLeft: theme.spacing.unit * 7,
+          paddingLeft: theme.spacing(7),
         },
       },
       row: {
diff --git a/packages/material-ui/test/typescript/stylingComparison.spec.tsx b/packages/material-ui/test/typescript/stylingComparison.spec.tsx
index 50ad2fc07555dc..220319e66f3ac4 100644
--- a/packages/material-ui/test/typescript/stylingComparison.spec.tsx
+++ b/packages/material-ui/test/typescript/stylingComparison.spec.tsx
@@ -5,7 +5,7 @@ import Typography, { TypographyProps } from '@material-ui/core/Typography';
 const styles = ({ palette, spacing }: Theme) =>
   createStyles({
     root: {
-      padding: spacing.unit,
+      padding: spacing(1),
       backgroundColor: palette.background.default,
       color: palette.primary.dark,
     },
diff --git a/pages/api/grid.md b/pages/api/grid.md
index 49c2366a54866f..cb5e5a71317d7f 100644
--- a/pages/api/grid.md
+++ b/pages/api/grid.md
@@ -30,7 +30,7 @@ import Grid from '@material-ui/core/Grid';
 | <span class="prop-name">lg</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br></span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">md</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br></span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">sm</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br></span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. |
-| <span class="prop-name">spacing</span> | <span class="prop-type">enum:&nbsp;0, 1, 2, 3, 4, 5, 6, 7, 8<br></span> | <span class="prop-default">0</span> | Defines the space between the type `item` component. It can only be used on a type `container` component. |
+| <span class="prop-name">spacing</span> | <span class="prop-type">enum:&nbsp;0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10<br></span> | <span class="prop-default">0</span> | Defines the space between the type `item` component. It can only be used on a type `container` component. |
 | <span class="prop-name">wrap</span> | <span class="prop-type">enum:&nbsp;'nowrap'&nbsp;&#124;<br>&nbsp;'wrap'&nbsp;&#124;<br>&nbsp;'wrap-reverse'<br></span> | <span class="prop-default">'wrap'</span> | Defines the `flex-wrap` style property. It's applied for all screen sizes. |
 | <span class="prop-name">xl</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br></span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. |
 | <span class="prop-name">xs</span> | <span class="prop-type">enum:&nbsp;false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br></span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. |
@@ -76,6 +76,8 @@ This property accepts the following keys:
 | <span class="prop-name">spacing-xs-6</span> | 
 | <span class="prop-name">spacing-xs-7</span> | 
 | <span class="prop-name">spacing-xs-8</span> | 
+| <span class="prop-name">spacing-xs-9</span> | 
+| <span class="prop-name">spacing-xs-10</span> | 
 | <span class="prop-name">grid-xs-auto</span> | 
 | <span class="prop-name">grid-xs-true</span> | 
 | <span class="prop-name">grid-xs-1</span> | 
diff --git a/pages/index.js b/pages/index.js
index e260ef4f652da3..24ab089a41316d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -57,31 +57,31 @@ const styles = theme => ({
     whiteSpace: 'nowrap',
   },
   headline: {
-    paddingLeft: theme.spacing.unit * 4,
-    paddingRight: theme.spacing.unit * 4,
-    marginTop: theme.spacing.unit,
+    paddingLeft: theme.spacing(4),
+    paddingRight: theme.spacing(4),
+    marginTop: theme.spacing(1),
     maxWidth: 500,
     textAlign: 'center',
   },
   content: {
-    paddingBottom: theme.spacing.unit * 8,
-    paddingTop: theme.spacing.unit * 8,
+    paddingBottom: theme.spacing(8),
+    paddingTop: theme.spacing(8),
     [theme.breakpoints.up('sm')]: {
-      paddingTop: theme.spacing.unit * 12,
+      paddingTop: theme.spacing(12),
     },
   },
   button: {
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing(3),
   },
   logo: {
-    margin: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 4}px`,
+    margin: `${theme.spacing(3)}px 0 ${theme.spacing(4)}px`,
     width: '100%',
     height: '35vw',
     maxHeight: 200,
   },
   social: {
     backgroundColor: theme.palette.background.paper,
-    padding: `${theme.spacing.unit * 2}px 0`,
+    padding: `${theme.spacing(2)}px 0`,
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -89,7 +89,7 @@ const styles = theme => ({
     boxSizing: 'content-box',
     '& span': {
       display: 'flex',
-      marginRight: theme.spacing.unit,
+      marginRight: theme.spacing(1),
     },
     '& a': {
       color: theme.palette.background.paper,
diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
index 652752dfb7d1e1..752a34385410ee 100644
--- a/test/regressions/TestViewer.js
+++ b/test/regressions/TestViewer.js
@@ -23,7 +23,7 @@ const styles = theme => ({
   },
   root: {
     backgroundColor: theme.palette.background.default,
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
   },
 });
 

From 90e7e91658c48c3ff0fefc0dec13385ad9830e07 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 7 Feb 2019 11:21:53 +0100
Subject: [PATCH 3/4] <3 for the review

---
 docs/src/modules/components/AppDrawer.js         | 2 +-
 docs/src/pages/layout/grid/grid.md               | 8 ++++----
 packages/material-ui/src/styles/createSpacing.js | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
index b71303e953b9b4..ee1ce997b52623 100644
--- a/docs/src/modules/components/AppDrawer.js
+++ b/docs/src/modules/components/AppDrawer.js
@@ -19,7 +19,7 @@ const styles = theme => ({
   },
   title: {
     color: theme.palette.text.secondary,
-    marginBottom: 4,
+    marginBottom: theme.spacing(0.5),
     '&:hover': {
       color: theme.palette.primary.main,
     },
diff --git a/docs/src/pages/layout/grid/grid.md b/docs/src/pages/layout/grid/grid.md
index 21b6a55f7da100..21d6d1e7a2ae37 100644
--- a/docs/src/pages/layout/grid/grid.md
+++ b/docs/src/pages/layout/grid/grid.md
@@ -23,11 +23,11 @@ The grid system is implemented with the `Grid` component:
 ## Spacing
 
 The responsive grid focuses on consistent spacing widths, rather than column width.
-Material design margins and columns follow an **8px** square baseline grid.
-The spacing property is an integer in the [0, 8] interval.
+Material Design margins and columns follow an **8px** square baseline grid.
+The spacing property is an integer between 0 and 10 inclusive.
 By default, the spacing between two grid items follows a linear function: `output(spacing) = spacing * 8px`, e.g. `spacing={2}` creates a 16px wide gap.
 
-This output transformation function can be customized using the theme, exactly like [the system spacing](/system/spacing/#transformation).
+This output transformation function can be customized [using the theme](/customization/themes/#spacing).
 
 {{"demo": "pages/layout/grid/SpacingGrid.js"}}
 
@@ -96,7 +96,7 @@ There are 3 available workarounds:
 ```jsx
   <body>
     <div style={{ padding: 20 }}>
-      <Grid container spacing={4}>
+      <Grid container spacing={5}>
         //...
       </Grid>
     </div>
diff --git a/packages/material-ui/src/styles/createSpacing.js b/packages/material-ui/src/styles/createSpacing.js
index da35f8b45bae87..c343ed7873b1f2 100644
--- a/packages/material-ui/src/styles/createSpacing.js
+++ b/packages/material-ui/src/styles/createSpacing.js
@@ -34,7 +34,7 @@ export default function createSpacing(spacing) {
             [
               'Material-UI: theme.spacing.unit usage has been deprecated.',
               'It will be removed in v5.',
-              'You can replace theme.spacing.unit * 2 with theme.spacing(2).',
+              'You can replace `theme.spacing.unit * 2` with `theme.spacing(2)`.',
             ].join('\n'),
           );
           warnOnce = true;

From 9604acf69eb2cc6da0ed3f78664da79b238d5ac3 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 7 Feb 2019 17:04:17 +0100
Subject: [PATCH 4/4] Multiple arity

---
 .size-limit.js                                |  6 +-
 docs/src/modules/components/AppSearch.js      |  4 +-
 .../modules/components/AppTableOfContents.js  |  2 +-
 docs/src/modules/components/Demo.js           |  2 +-
 docs/src/modules/components/HomeFooter.js     |  4 +-
 docs/src/modules/components/HomeSteps.js      |  4 +-
 docs/src/modules/components/MarkdownDocs.js   |  2 +-
 docs/src/modules/components/Tidelift.js       |  6 +-
 .../pages/customization/themes/WithTheme.js   |  4 +-
 docs/src/pages/customization/themes/themes.md | 11 ++-
 .../IntegrationDownshift.hooks.js             |  2 +-
 .../autocomplete/IntegrationDownshift.js      |  2 +-
 .../IntegrationReactSelect.hooks.js           |  4 +-
 .../autocomplete/IntegrationReactSelect.js    |  4 +-
 docs/src/pages/demos/badges/SimpleBadge.js    |  2 +-
 .../demos/breadcrumbs/CollapsedBreadcrumbs.js |  2 +-
 .../demos/breadcrumbs/CustomSeparator.js      |  2 +-
 .../demos/breadcrumbs/IconBreadcrumbs.js      |  2 +-
 .../demos/breadcrumbs/SimpleBreadcrumbs.js    |  2 +-
 .../pages/demos/dividers/MiddleDividers.js    |  4 +-
 .../DetailedExpansionPanel.js                 |  2 +-
 .../demos/lists/InteractiveList.hooks.js      |  2 +-
 docs/src/pages/demos/lists/InteractiveList.js |  2 +-
 .../RadioButtonsGroup.hooks.js                |  2 +-
 .../selection-controls/RadioButtonsGroup.js   |  2 +-
 docs/src/pages/discover-more/team/Team.js     |  2 +-
 .../page-layout-examples/album/Album.js       |  4 +-
 .../page-layout-examples/blog/Blog.js         |  6 +-
 .../page-layout-examples/checkout/Checkout.js |  2 +-
 .../page-layout-examples/checkout/Review.js   |  2 +-
 .../page-layout-examples/pricing/Pricing.js   |  4 +-
 .../page-layout-examples/sign-in/SignIn.js    |  2 +-
 docs/src/pages/lab/speed-dial/SpeedDials.js   |  2 +-
 .../pages/lab/toggle-button/ToggleButtons.js  |  4 +-
 docs/src/pages/layout/grid/AutoGridNoWrap.js  |  2 +-
 docs/src/pages/layout/grid/CSSGrid.js         |  2 +-
 .../onepirate/modules/views/AppForm.js        |  4 +-
 .../onepirate/modules/views/ProductCTA.js     |  2 +-
 .../modules/views/ProductHowItWorks.js        |  2 +-
 .../modules/views/ProductSmokingHero.js       |  2 +-
 .../onepirate/modules/views/ProductValues.js  |  2 +-
 .../tweeper/theme/tweeper/variables.js        |  4 +-
 docs/src/pages/style/color/Color.js           |  2 +-
 docs/src/pages/utils/portal/SimplePortal.js   |  2 +-
 .../material-ui/src/styles/createSpacing.js   | 85 ++++++++++++-------
 .../src/styles/createSpacing.test.js          | 31 +++++--
 pages/index.js                                |  4 +-
 47 files changed, 149 insertions(+), 104 deletions(-)

diff --git a/.size-limit.js b/.size-limit.js
index 8ddeaa16e3b557..20995321102336 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -28,7 +28,7 @@ module.exports = [
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '92.3 KB',
+    limit: '92.4 KB',
   },
   {
     name: 'The theme object',
@@ -59,14 +59,14 @@ module.exports = [
     name: 'The size of the @material-ui/core/Button component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Button/index.js',
-    limit: '24.5 KB',
+    limit: '24.6 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=react-modal
     name: 'The size of the @material-ui/core/Modal component',
     webpack: true,
     path: 'packages/material-ui/build/esm/Modal/index.js',
-    limit: '24.0 KB',
+    limit: '24.1 KB',
   },
   {
     // vs https://bundlephobia.com/result?p=react-popper
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 9193b34ce040f1..705a08f9afabeb 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -153,9 +153,7 @@ const styles = theme => ({
     color: 'inherit',
   },
   inputInput: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
-      9,
-    )}px`,
+    padding: theme.spacing(1, 1, 1, 9),
   },
 });
 
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index 97142ee0f9d201..b58e78d82315e4 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -71,7 +71,7 @@ const styles = theme => ({
   },
   item: {
     fontSize: 13,
-    padding: `${theme.spacing(0.5)}px 0`,
+    padding: theme.spacing(0.5, 0),
   },
 });
 
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index fb2420e498ca8c..4ab316169a9662 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -43,7 +43,7 @@ const styles = theme => ({
     marginLeft: -theme.spacing(2),
     marginRight: -theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
-      padding: `0 ${theme.spacing(1)}px`,
+      padding: theme.spacing(0, 1),
       marginLeft: 0,
       marginRight: 0,
     },
diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js
index af25eaf3cf5194..cb4a1e90faf195 100644
--- a/docs/src/modules/components/HomeFooter.js
+++ b/docs/src/modules/components/HomeFooter.js
@@ -11,9 +11,9 @@ const styles = theme => ({
   root: {
     maxWidth: theme.spacing(110),
     margin: 'auto',
-    padding: `${theme.spacing(3)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(3, 2),
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing(6)}px ${theme.spacing(2)}px`,
+      padding: theme.spacing(6, 2),
     },
   },
   list: {
diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
index 792278457e91f0..a9945a229c97ee 100644
--- a/docs/src/modules/components/HomeSteps.js
+++ b/docs/src/modules/components/HomeSteps.js
@@ -18,11 +18,11 @@ import Link from 'docs/src/modules/components/Link';
 const styles = theme => ({
   step: {
     border: `12px solid ${theme.palette.background.paper}`,
-    padding: `${theme.spacing(3)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(3, 2),
     borderRightWidth: 0,
     borderLeftWidth: 0,
     [theme.breakpoints.up('sm')]: {
-      padding: `${theme.spacing(5)}px ${theme.spacing(4)}px`,
+      padding: theme.spacing(5, 4),
     },
     [theme.breakpoints.up('md')]: {
       borderRightWidth: 12,
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 2abb630b8d9d2f..40e7452729bcd3 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -34,7 +34,7 @@ const styles = theme => ({
   markdownElement: {
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(2),
-    padding: `0 ${theme.spacing(1)}px`,
+    padding: theme.spacing(0, 1),
   },
 });
 
diff --git a/docs/src/modules/components/Tidelift.js b/docs/src/modules/components/Tidelift.js
index 85086f8558137c..aa616872c2d40a 100644
--- a/docs/src/modules/components/Tidelift.js
+++ b/docs/src/modules/components/Tidelift.js
@@ -9,9 +9,7 @@ import compose from 'recompose/compose';
 
 const styles = theme => ({
   root: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
-      2,
-    )}px`,
+    padding: theme.spacing(1, 1, 1, 2),
     right: 0,
     left: 0,
     display: 'flex',
@@ -32,7 +30,7 @@ const styles = theme => ({
     content: '""',
     width: 20,
     height: 20,
-    margin: `0 ${theme.spacing(1)}px 0 0`,
+    margin: theme.spacing(0, 1, 0, 0),
   },
 });
 
diff --git a/docs/src/pages/customization/themes/WithTheme.js b/docs/src/pages/customization/themes/WithTheme.js
index cb8727d553ecb5..08bc8ab732df05 100644
--- a/docs/src/pages/customization/themes/WithTheme.js
+++ b/docs/src/pages/customization/themes/WithTheme.js
@@ -11,12 +11,12 @@ function WithTheme(props) {
   const styles = {
     primaryText: {
       backgroundColor: theme.palette.background.default,
-      padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+      padding: theme.spacing(1, 2),
       color: primaryText,
     },
     primaryColor: {
       backgroundColor: primaryColor,
-      padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+      padding: theme.spacing(1, 2),
       color: theme.palette.common.white,
     },
   };
diff --git a/docs/src/pages/customization/themes/themes.md b/docs/src/pages/customization/themes/themes.md
index 0f7a3aacf4629c..cabfa43b63ce69 100644
--- a/docs/src/pages/customization/themes/themes.md
+++ b/docs/src/pages/customization/themes/themes.md
@@ -319,12 +319,21 @@ theme.spacing(2) // = 4 * 2
 
 ```js
 const theme = createMuiTheme({
-  spacing: x => `${0.25 * x}rem`, // (Bootstrap strategy)
+  spacing: factor => `${0.25 * factor}rem`, // (Bootstrap strategy)
 });
 
 theme.spacing(2) // = 0.5rem = 8px
 ```
 
+#### Multiple arity
+
+The `theme.spacing()` helper accepts up to 4 arguments.
+You can use the arguments to reduce the boilerplate:
+```diff
+-  padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
++  padding: theme.spacing(1, 2), // '8px 16px'
+```
+
 ### Other variables
 
 In addition to the palette, dark and light types, and typography, the theme normalizes implementation by providing many more default values, such as breakpoints, shadows, transitions, etc.
diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js
index 9b6510888e3283..66674f5469fbb0 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationDownshift.hooks.js
@@ -214,7 +214,7 @@ const useStyles = makeStyles(theme => ({
     right: 0,
   },
   chip: {
-    margin: `${theme.spacing(0.5)}px ${2}px`,
+    margin: theme.spacing(0.5, 2),
   },
   inputRoot: {
     flexWrap: 'wrap',
diff --git a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
index 44fe885c47c426..4eee6162b58696 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationDownshift.js
@@ -229,7 +229,7 @@ const styles = theme => ({
     right: 0,
   },
   chip: {
-    margin: `${theme.spacing(0.5)}px ${2}px`,
+    margin: theme.spacing(0.5, 2),
   },
   inputRoot: {
     flexWrap: 'wrap',
diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js
index 0af576673065cf..c36feae0cb2151 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.hooks.js
@@ -70,7 +70,7 @@ const useStyles = makeStyles(theme => ({
     overflow: 'hidden',
   },
   chip: {
-    margin: `${theme.spacing(0.5)}px ${2}px`,
+    margin: theme.spacing(0.5, 2),
   },
   chipFocused: {
     backgroundColor: emphasize(
@@ -79,7 +79,7 @@ const useStyles = makeStyles(theme => ({
     ),
   },
   noOptionsMessage: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
   singleValue: {
     fontSize: 16,
diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
index b1446aa6754d3e..5c63b70d7628ef 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
@@ -71,7 +71,7 @@ const styles = theme => ({
     overflow: 'hidden',
   },
   chip: {
-    margin: `${theme.spacing(0.5)}px ${2}px`,
+    margin: theme.spacing(0.5, 2),
   },
   chipFocused: {
     backgroundColor: emphasize(
@@ -80,7 +80,7 @@ const styles = theme => ({
     ),
   },
   noOptionsMessage: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
   singleValue: {
     fontSize: 16,
diff --git a/docs/src/pages/demos/badges/SimpleBadge.js b/docs/src/pages/demos/badges/SimpleBadge.js
index 058735384cd3ef..d63d723fce04af 100644
--- a/docs/src/pages/demos/badges/SimpleBadge.js
+++ b/docs/src/pages/demos/badges/SimpleBadge.js
@@ -15,7 +15,7 @@ const styles = theme => ({
     margin: theme.spacing(2),
   },
   padding: {
-    padding: `0 ${theme.spacing(2)}px`,
+    padding: theme.spacing(0, 2),
   },
 });
 
diff --git a/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js
index 1fa77e5d19ee40..a512022ef4f1a3 100644
--- a/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js
+++ b/docs/src/pages/demos/breadcrumbs/CollapsedBreadcrumbs.js
@@ -14,7 +14,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   paper: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
 });
 
diff --git a/docs/src/pages/demos/breadcrumbs/CustomSeparator.js b/docs/src/pages/demos/breadcrumbs/CustomSeparator.js
index ca53af9a1b97bf..9c55ca7e89e4c5 100644
--- a/docs/src/pages/demos/breadcrumbs/CustomSeparator.js
+++ b/docs/src/pages/demos/breadcrumbs/CustomSeparator.js
@@ -13,7 +13,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   paper: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
 });
 
diff --git a/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js
index a6f8c91021abd2..acff747b19c5c0 100644
--- a/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js
+++ b/docs/src/pages/demos/breadcrumbs/IconBreadcrumbs.js
@@ -11,7 +11,7 @@ import GrainIcon from '@material-ui/icons/Grain';
 
 const styles = theme => ({
   root: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
   link: {
     display: 'flex',
diff --git a/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js
index e982388ffb05d9..814809ef954540 100644
--- a/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js
+++ b/docs/src/pages/demos/breadcrumbs/SimpleBreadcrumbs.js
@@ -12,7 +12,7 @@ const styles = theme => ({
     flexWrap: 'wrap',
   },
   paper: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
 });
 
diff --git a/docs/src/pages/demos/dividers/MiddleDividers.js b/docs/src/pages/demos/dividers/MiddleDividers.js
index 04f9d9052793d0..e40d847c232dd4 100644
--- a/docs/src/pages/demos/dividers/MiddleDividers.js
+++ b/docs/src/pages/demos/dividers/MiddleDividers.js
@@ -17,13 +17,13 @@ const styles = theme => ({
     marginRight: theme.spacing(1),
   },
   section1: {
-    margin: `${theme.spacing(3)}px ${theme.spacing(2)}px`,
+    margin: theme.spacing(3, 2),
   },
   section2: {
     margin: theme.spacing(2),
   },
   section3: {
-    margin: `${theme.spacing(6)}px ${theme.spacing(2)}px ${theme.spacing(2)}px`,
+    margin: theme.spacing(6, 2, 2),
   },
 });
 
diff --git a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
index 38654b9ba7036c..bee7727a335d8a 100644
--- a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
+++ b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js
@@ -36,7 +36,7 @@ const styles = theme => ({
   },
   helper: {
     borderLeft: `2px solid ${theme.palette.divider}`,
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
   },
   link: {
     color: theme.palette.primary.main,
diff --git a/docs/src/pages/demos/lists/InteractiveList.hooks.js b/docs/src/pages/demos/lists/InteractiveList.hooks.js
index 288e73548a7be1..8b618f53ad0f92 100644
--- a/docs/src/pages/demos/lists/InteractiveList.hooks.js
+++ b/docs/src/pages/demos/lists/InteractiveList.hooks.js
@@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   title: {
-    margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`,
+    margin: theme.spacing(4, 0, 2),
   },
 }));
 
diff --git a/docs/src/pages/demos/lists/InteractiveList.js b/docs/src/pages/demos/lists/InteractiveList.js
index 9a4038c5f74ab3..ce564212bc53a3 100644
--- a/docs/src/pages/demos/lists/InteractiveList.js
+++ b/docs/src/pages/demos/lists/InteractiveList.js
@@ -26,7 +26,7 @@ const styles = theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   title: {
-    margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`,
+    margin: theme.spacing(4, 0, 2),
   },
 });
 
diff --git a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js
index 718529060bdbe6..2535532134547d 100644
--- a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js
+++ b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.hooks.js
@@ -15,7 +15,7 @@ const useStyles = makeStyles(theme => ({
     margin: theme.spacing(3),
   },
   group: {
-    margin: `${theme.spacing(1)}px 0`,
+    margin: theme.spacing(1, 0),
   },
 }));
 
diff --git a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js
index 5995cda9a3354d..7c72391f45ac5f 100644
--- a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js
+++ b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js
@@ -16,7 +16,7 @@ const styles = theme => ({
     margin: theme.spacing(3),
   },
   group: {
-    margin: `${theme.spacing(1)}px 0`,
+    margin: theme.spacing(1, 0),
   },
 });
 
diff --git a/docs/src/pages/discover-more/team/Team.js b/docs/src/pages/discover-more/team/Team.js
index a382da088c9c9c..f1126907b0d3c4 100644
--- a/docs/src/pages/discover-more/team/Team.js
+++ b/docs/src/pages/discover-more/team/Team.js
@@ -89,7 +89,7 @@ const members = [
 
 const styles = theme => ({
   details: {
-    margin: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px 0`,
+    margin: theme.spacing(1, 1, 1, 0),
   },
   cover: {
     width: theme.spacing(10),
diff --git a/docs/src/pages/getting-started/page-layout-examples/album/Album.js b/docs/src/pages/getting-started/page-layout-examples/album/Album.js
index e980b39404a20b..0b06d77b34c938 100644
--- a/docs/src/pages/getting-started/page-layout-examples/album/Album.js
+++ b/docs/src/pages/getting-started/page-layout-examples/album/Album.js
@@ -27,7 +27,7 @@ const styles = theme => ({
   heroContent: {
     maxWidth: 600,
     margin: '0 auto',
-    padding: `${theme.spacing(8)}px 0 ${theme.spacing(6)}px`,
+    padding: theme.spacing(8, 0, 6),
   },
   heroButtons: {
     marginTop: theme.spacing(4),
@@ -43,7 +43,7 @@ const styles = theme => ({
     },
   },
   cardGrid: {
-    padding: `${theme.spacing(8)}px 0`,
+    padding: theme.spacing(8, 0),
   },
   card: {
     height: '100%',
diff --git a/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js b/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js
index 66074485b446fb..c510b8303d62cd 100644
--- a/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js
+++ b/docs/src/pages/getting-started/page-layout-examples/blog/Blog.js
@@ -45,7 +45,7 @@ const styles = theme => ({
     marginBottom: theme.spacing(4),
   },
   mainFeaturedPostContent: {
-    padding: `${theme.spacing(6)}px`,
+    padding: theme.spacing(6),
     [theme.breakpoints.up('md')]: {
       paddingRight: 0,
     },
@@ -63,7 +63,7 @@ const styles = theme => ({
     width: 160,
   },
   markdown: {
-    padding: `${theme.spacing(3)}px 0`,
+    padding: theme.spacing(3, 0),
   },
   sidebarAboutBox: {
     padding: theme.spacing(2),
@@ -75,7 +75,7 @@ const styles = theme => ({
   footer: {
     backgroundColor: theme.palette.background.paper,
     marginTop: theme.spacing(8),
-    padding: `${theme.spacing(6)}px 0`,
+    padding: theme.spacing(6, 0),
   },
 });
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/checkout/Checkout.js b/docs/src/pages/getting-started/page-layout-examples/checkout/Checkout.js
index 87b6dd91e1eadd..20407ce491c19d 100644
--- a/docs/src/pages/getting-started/page-layout-examples/checkout/Checkout.js
+++ b/docs/src/pages/getting-started/page-layout-examples/checkout/Checkout.js
@@ -39,7 +39,7 @@ const styles = theme => ({
     },
   },
   stepper: {
-    padding: `${theme.spacing(3)}px 0 ${theme.spacing(5)}px`,
+    padding: theme.spacing(3, 0, 5),
   },
   buttons: {
     display: 'flex',
diff --git a/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js b/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js
index 88e29b60ed2f91..bead26ab7529a2 100644
--- a/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js
+++ b/docs/src/pages/getting-started/page-layout-examples/checkout/Review.js
@@ -24,7 +24,7 @@ const payments = [
 
 const styles = theme => ({
   listItem: {
-    padding: `${theme.spacing(1)}px 0`,
+    padding: theme.spacing(1, 0),
   },
   total: {
     fontWeight: '700',
diff --git a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
index 44d8a8d3ab04a1..f35207b154c3c7 100644
--- a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
+++ b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js
@@ -39,7 +39,7 @@ const styles = theme => ({
   heroContent: {
     maxWidth: 600,
     margin: '0 auto',
-    padding: `${theme.spacing(8)}px 0 ${theme.spacing(6)}px`,
+    padding: theme.spacing(8, 0, 6),
   },
   cardHeader: {
     backgroundColor: theme.palette.grey[200],
@@ -58,7 +58,7 @@ const styles = theme => ({
   footer: {
     marginTop: theme.spacing(8),
     borderTop: `1px solid ${theme.palette.divider}`,
-    padding: `${theme.spacing(6)}px 0`,
+    padding: theme.spacing(6, 0),
   },
 });
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js b/docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js
index 515beb81cb7150..6cb3e0ffbea392 100644
--- a/docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js
+++ b/docs/src/pages/getting-started/page-layout-examples/sign-in/SignIn.js
@@ -30,7 +30,7 @@ const styles = theme => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`,
+    padding: theme.spacing(2, 3, 3),
   },
   avatar: {
     margin: theme.spacing(1),
diff --git a/docs/src/pages/lab/speed-dial/SpeedDials.js b/docs/src/pages/lab/speed-dial/SpeedDials.js
index 89ff801862d0c1..cb6846259b5421 100644
--- a/docs/src/pages/lab/speed-dial/SpeedDials.js
+++ b/docs/src/pages/lab/speed-dial/SpeedDials.js
@@ -29,7 +29,7 @@ const styles = theme => ({
     height: 380,
   },
   radioGroup: {
-    margin: `${theme.spacing(1)}px 0`,
+    margin: theme.spacing(1, 0),
   },
   speedDial: {
     position: 'absolute',
diff --git a/docs/src/pages/lab/toggle-button/ToggleButtons.js b/docs/src/pages/lab/toggle-button/ToggleButtons.js
index 945313a9495ab9..17c14134268a57 100644
--- a/docs/src/pages/lab/toggle-button/ToggleButtons.js
+++ b/docs/src/pages/lab/toggle-button/ToggleButtons.js
@@ -18,11 +18,11 @@ import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 const styles = theme => ({
   toggleContainer: {
     height: 56,
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: theme.spacing(1, 2),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    margin: `${theme.spacing(1)}px 0`,
+    margin: theme.spacing(1, 0),
     background: theme.palette.background.default,
   },
 });
diff --git a/docs/src/pages/layout/grid/AutoGridNoWrap.js b/docs/src/pages/layout/grid/AutoGridNoWrap.js
index dfd2d722745f55..9010f942a10d60 100644
--- a/docs/src/pages/layout/grid/AutoGridNoWrap.js
+++ b/docs/src/pages/layout/grid/AutoGridNoWrap.js
@@ -10,7 +10,7 @@ const styles = theme => ({
   root: {
     flexGrow: 1,
     overflow: 'hidden',
-    padding: `0 ${theme.spacing(3)}px`,
+    padding: theme.spacing(0, 3),
   },
   paper: {
     maxWidth: 400,
diff --git a/docs/src/pages/layout/grid/CSSGrid.js b/docs/src/pages/layout/grid/CSSGrid.js
index 93336f84485bca..efbf3b672dd3e9 100644
--- a/docs/src/pages/layout/grid/CSSGrid.js
+++ b/docs/src/pages/layout/grid/CSSGrid.js
@@ -20,7 +20,7 @@ const styles = theme => ({
     marginBottom: theme.spacing(1),
   },
   divider: {
-    margin: `${theme.spacing(2)}px 0`,
+    margin: theme.spacing(2, 0),
   },
 });
 
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js
index 026725172d7be4..0214f72368ed07 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppForm.js
@@ -11,9 +11,9 @@ const styles = theme => ({
     backgroundRepeat: 'no-repeat',
   },
   paper: {
-    padding: `${theme.spacing(4)}px ${theme.spacing(3)}px`,
+    padding: theme.spacing(4, 3),
     [theme.breakpoints.up('md')]: {
-      padding: `${theme.spacing(10)}px ${theme.spacing(8)}px`,
+      padding: theme.spacing(10, 8),
     },
   },
 });
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js
index 1b83274f205d1e..383cc0c1d19bb6 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.js
@@ -22,7 +22,7 @@ const styles = theme => ({
     display: 'flex',
     justifyContent: 'center',
     backgroundColor: theme.palette.warning.main,
-    padding: `${theme.spacing(8)}px ${theme.spacing(3)}px`,
+    padding: theme.spacing(8, 3),
   },
   cardContent: {
     maxWidth: 400,
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
index 5737415420ea2e..d2c22858206be4 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
@@ -25,7 +25,7 @@ const styles = theme => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: `0px ${theme.spacing(5)}px`,
+    padding: theme.spacing(0, 5),
   },
   title: {
     marginBottom: theme.spacing(14),
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductSmokingHero.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductSmokingHero.js
index dfe60adde6c4ab..a3e55524598f6e 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductSmokingHero.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductSmokingHero.js
@@ -17,7 +17,7 @@ const styles = theme => ({
     border: '4px solid currentColor',
     borderRadius: 0,
     height: 'auto',
-    padding: `${theme.spacing(2)}px ${theme.spacing(5)}px`,
+    padding: theme.spacing(2, 5),
   },
   link: {
     marginTop: theme.spacing(3),
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js
index 52b8aad8a44aa9..fa4f250de317f5 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.js
@@ -21,7 +21,7 @@ const styles = theme => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: `0px ${theme.spacing(5)}px`,
+    padding: theme.spacing(0, 5),
   },
   image: {
     height: 55,
diff --git a/docs/src/pages/premium-themes/tweeper/theme/tweeper/variables.js b/docs/src/pages/premium-themes/tweeper/theme/tweeper/variables.js
index 0c3ea40badf1a7..af13a4fe604841 100644
--- a/docs/src/pages/premium-themes/tweeper/theme/tweeper/variables.js
+++ b/docs/src/pages/premium-themes/tweeper/theme/tweeper/variables.js
@@ -31,9 +31,7 @@ const theme = createMuiTheme({
   palette: {
     primary,
   },
-  spacing: {
-    unit: 4,
-  },
+  spacing: 4,
   props: {
     MuiButtonBase: {
       disableRipple: true,
diff --git a/docs/src/pages/style/color/Color.js b/docs/src/pages/style/color/Color.js
index 292fbd834ce29e..4a706cbae20aa9 100644
--- a/docs/src/pages/style/color/Color.js
+++ b/docs/src/pages/style/color/Color.js
@@ -43,7 +43,7 @@ export const styles = theme => ({
   },
   colorGroup: {
     padding: 0,
-    margin: `0 ${theme.spacing(2)}px ${theme.spacing(2)}px 0`,
+    margin: theme.spacing(0, 2, 2, 0),
     flexGrow: 1,
     [theme.breakpoints.up('sm')]: {
       flexGrow: 0,
diff --git a/docs/src/pages/utils/portal/SimplePortal.js b/docs/src/pages/utils/portal/SimplePortal.js
index eb915b5ca56bd1..26ddf25d8c9891 100644
--- a/docs/src/pages/utils/portal/SimplePortal.js
+++ b/docs/src/pages/utils/portal/SimplePortal.js
@@ -8,7 +8,7 @@ import { withStyles } from '@material-ui/core/styles';
 const styles = theme => ({
   alert: {
     padding: theme.spacing(1),
-    margin: `${theme.spacing(1)}px 0`,
+    margin: theme.spacing(1, 0),
     border: '1px solid',
     borderColor: theme.palette.text.primary,
   },
diff --git a/packages/material-ui/src/styles/createSpacing.js b/packages/material-ui/src/styles/createSpacing.js
index c343ed7873b1f2..41c706da10153a 100644
--- a/packages/material-ui/src/styles/createSpacing.js
+++ b/packages/material-ui/src/styles/createSpacing.js
@@ -1,48 +1,69 @@
 import warning from 'warning';
 
-let warnOnce = false;
+let warnOnce;
+
+export default function createSpacing(spacingInput = 8) {
+  // Already transformed.
+  if (spacingInput.mui) {
+    return spacingInput;
+  }
 
-// Same logic as /packages/material-ui-system/src/spacing.js
-export default function createSpacing(spacing) {
   // All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
   // https://material.io/design/layout/understanding-layout.html#pixel-density
-  const themeSpacing = spacing || 8;
-  let output;
+  let transform;
 
-  if (typeof themeSpacing === 'number') {
-    output = value => themeSpacing * value;
-  } else if (typeof themeSpacing === 'function') {
-    output = themeSpacing;
+  if (typeof spacingInput === 'function') {
+    transform = spacingInput;
   } else {
     warning(
-      false,
+      typeof spacingInput === 'number',
       [
-        `Material-UI: the \`theme.spacing\` value (${themeSpacing}) is invalid.`,
+        `Material-UI: the \`theme.spacing\` value (${spacingInput}) is invalid.`,
         'It should be a number or a function.',
       ].join('\n'),
     );
-    output = value => themeSpacing * value;
+    transform = factor => {
+      warning(
+        typeof factor === 'number',
+        `Expected spacing argument to be a number, got ${factor}`,
+      );
+      return spacingInput * factor;
+    };
   }
 
-  if (!output.hasOwnProperty('unit')) {
-    // To remove in v5
-    Object.defineProperty(output, 'unit', {
-      get: () => {
-        if (process.env.NODE_ENV !== 'production') {
-          warning(
-            warnOnce && process.env.NODE_ENV !== 'test',
-            [
-              'Material-UI: theme.spacing.unit usage has been deprecated.',
-              'It will be removed in v5.',
-              'You can replace `theme.spacing.unit * 2` with `theme.spacing(2)`.',
-            ].join('\n'),
-          );
-          warnOnce = true;
-        }
-        return themeSpacing;
-      },
-    });
-  }
+  const spacing = (...args) => {
+    warning(args.length <= 4, `Too many arguments, expected [1, 4], got ${args.length}`);
+
+    if (args.length === 1) {
+      return transform(args[0]);
+    }
+
+    return args
+      .map(factor => {
+        const output = transform(factor);
+        return typeof output === 'number' ? `${output}px` : output;
+      })
+      .join(' ');
+  };
+
+  // Backward compatibility, to remove in v5.
+  Object.defineProperty(spacing, 'unit', {
+    get: () => {
+      if (process.env.NODE_ENV !== 'production') {
+        warning(
+          warnOnce && process.env.NODE_ENV !== 'test',
+          [
+            'Material-UI: theme.spacing.unit usage has been deprecated.',
+            'It will be removed in v5.',
+            'You can replace `theme.spacing.unit * 2` with `theme.spacing(2)`.',
+          ].join('\n'),
+        );
+        warnOnce = true;
+      }
+      return spacingInput;
+    },
+  });
+  spacing.mui = true;
 
-  return output;
+  return spacing;
 }
diff --git a/packages/material-ui/src/styles/createSpacing.test.js b/packages/material-ui/src/styles/createSpacing.test.js
index 961d757fbc54ce..d38205a24c926e 100644
--- a/packages/material-ui/src/styles/createSpacing.test.js
+++ b/packages/material-ui/src/styles/createSpacing.test.js
@@ -9,10 +9,12 @@ describe('createSpacing', () => {
     assert.strictEqual(spacing(1), 8);
     spacing = createSpacing(10);
     assert.strictEqual(spacing(1), 10);
-    spacing = createSpacing(value => [0, 8, 16][value]);
+    spacing = createSpacing(factor => [0, 8, 16][factor]);
     assert.strictEqual(spacing(2), 16);
-    spacing = createSpacing(value => value ** 2);
+    spacing = createSpacing(factor => factor ** 2);
     assert.strictEqual(spacing(2), 4);
+    spacing = createSpacing(factor => `${0.25 * factor}rem`);
+    assert.strictEqual(spacing(2), '0.5rem');
   });
 
   it('should support recursion', () => {
@@ -20,12 +22,20 @@ describe('createSpacing', () => {
     createSpacing(spacing);
   });
 
-  describe('v4 deprecation', () => {
-    before(() => {
+  it('should support multiple arguments', () => {
+    let spacing;
+    spacing = createSpacing();
+    assert.strictEqual(spacing(1, 2), '8px 16px');
+    spacing = createSpacing(factor => `${0.25 * factor}rem`);
+    assert.strictEqual(spacing(1, 2), '0.25rem 0.5rem');
+  });
+
+  describe('warning', () => {
+    beforeEach(() => {
       consoleErrorMock.spy();
     });
 
-    after(() => {
+    afterEach(() => {
       consoleErrorMock.reset();
     });
 
@@ -35,5 +45,16 @@ describe('createSpacing', () => {
       assert.strictEqual(consoleErrorMock.callCount(), 1);
       assert.include(consoleErrorMock.args()[0][0], 'theme.spacing.unit usage has been deprecated');
     });
+
+    it('should warn for wrong input', () => {
+      createSpacing({
+        unit: 4,
+      });
+      assert.strictEqual(consoleErrorMock.callCount(), 1);
+      assert.include(
+        consoleErrorMock.args()[0][0],
+        'the `theme.spacing` value ([object Object]) is invalid',
+      );
+    });
   });
 });
diff --git a/pages/index.js b/pages/index.js
index 24ab089a41316d..2c0d9e72d807f9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -74,14 +74,14 @@ const styles = theme => ({
     marginTop: theme.spacing(3),
   },
   logo: {
-    margin: `${theme.spacing(3)}px 0 ${theme.spacing(4)}px`,
+    margin: theme.spacing(3, 0, 4),
     width: '100%',
     height: '35vw',
     maxHeight: 200,
   },
   social: {
     backgroundColor: theme.palette.background.paper,
-    padding: `${theme.spacing(2)}px 0`,
+    padding: theme.spacing(2, 0),
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',