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] 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',