mui · mbrookes · Sep 12, 2020 · Sep 10, 2020 · Sep 10, 2020 · Sep 10, 2020
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -36,7 +36,7 @@ const useStyles = makeStyles((theme) => ({
   },
   item: {
     fontSize: '.8125rem',
-    padding: theme.spacing(0.5, 0, 0.5, `${Math.max(0, theme.spacing(1) - 3)}px`),
+    padding: theme.spacing(0.5, 0, 0.5, '5px'),
     borderLeft: `3px solid transparent`,
     boxSizing: 'border-box',
     '&:hover': {

diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
@@ -19,7 +19,7 @@ const styles = (theme) => ({
   },
   container: {
     marginBottom: theme.spacing(20),
-    maxWidth: 680 + theme.spacing(8 + 4),
+    maxWidth: `calc(680px + ${theme.spacing(12)})`,
     '& .markdownElement': {
       fontSize: 18,
       lineHeight: 1.7,

diff --git a/docs/src/modules/components/TopLayoutCompany.js b/docs/src/modules/components/TopLayoutCompany.js
@@ -13,7 +13,7 @@ const styles = (theme) => ({
   },
   container: {
     marginBottom: theme.spacing(20),
-    maxWidth: 680 + theme.spacing(8 + 4),
+    maxWidth: `calc(680px + ${theme.spacing(12)})`,
     '& .markdownElement': {
       [theme.breakpoints.up('md')]: {
         paddingRight: theme.spacing(4),

diff --git a/docs/src/modules/components/ad.styles.js b/docs/src/modules/components/ad.styles.js
@@ -6,9 +6,9 @@ const adBodyImageStyles = (theme) => ({
     display: 'block',
     overflow: 'hidden',
     border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
-    padding: `${theme.spacing(1.5)}px ${theme.spacing(1.5)}px ${theme.spacing(1.5)}px ${
-      theme.spacing(1.5) + 130
-    }px`,
+    padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} ${theme.spacing(
+      1.5,
+    )} calc(${theme.spacing(1.5)} + 130px)`,
     borderRadius: theme.shape.borderRadius,
   },
   imgWrapper: {

diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.js b/docs/src/pages/components/app-bar/PrimarySearchAppBar.js
@@ -58,7 +58,7 @@ const useStyles = makeStyles((theme) => ({
   inputInput: {
     padding: theme.spacing(1, 1, 1, 0),
     // vertical padding + font size from searchIcon
-    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
     transition: theme.transitions.create('width'),
     width: '100%',
     [theme.breakpoints.up('md')]: {

diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx b/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx
@@ -64,7 +64,7 @@ const useStyles = makeStyles((theme: Theme) =>
     inputInput: {
       padding: theme.spacing(1, 1, 1, 0),
       // vertical padding + font size from searchIcon
-      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+      paddingLeft: `calc(1em + ${theme.spacing(4)})`,
       transition: theme.transitions.create('width'),
       width: '100%',
       [theme.breakpoints.up('md')]: {

diff --git a/docs/src/pages/components/app-bar/SearchAppBar.js b/docs/src/pages/components/app-bar/SearchAppBar.js
@@ -51,7 +51,7 @@ const useStyles = makeStyles((theme) => ({
   inputInput: {
     padding: theme.spacing(1, 1, 1, 0),
     // vertical padding + font size from searchIcon
-    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
     transition: theme.transitions.create('width'),
     width: '100%',
     [theme.breakpoints.up('sm')]: {

diff --git a/docs/src/pages/components/app-bar/SearchAppBar.tsx b/docs/src/pages/components/app-bar/SearchAppBar.tsx
@@ -57,7 +57,7 @@ const useStyles = makeStyles((theme: Theme) =>
     inputInput: {
       padding: theme.spacing(1, 1, 1, 0),
       // vertical padding + font size from searchIcon
-      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+      paddingLeft: `calc(1em + ${theme.spacing(4)})`,
       transition: theme.transitions.create('width'),
       width: '100%',
       [theme.breakpoints.up('sm')]: {

diff --git a/docs/src/pages/components/buttons/ButtonBase.js b/docs/src/pages/components/buttons/ButtonBase.js
@@ -81,9 +81,9 @@ const useStyles = makeStyles((theme) => ({
   },
   imageTitle: {
     position: 'relative',
-    padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${
-      theme.spacing(1) + 6
-    }px`,
+    padding: `${theme.spacing(2)} ${theme.spacing(4)} calc(${theme.spacing(
+      1,
+    )} + 6px)`,
   },
   imageMarked: {
     height: 3,

diff --git a/docs/src/pages/components/buttons/ButtonBase.tsx b/docs/src/pages/components/buttons/ButtonBase.tsx
@@ -82,9 +82,9 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     imageTitle: {
       position: 'relative',
-      padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${
-        theme.spacing(1) + 6
-      }px`,
+      padding: `${theme.spacing(2)} ${theme.spacing(4)} calc(${theme.spacing(
+        1,
+      )} + 6px)`,
     },
     imageMarked: {
       height: 3,

diff --git a/docs/src/pages/components/dividers/SubheaderDividers.js b/docs/src/pages/components/dividers/SubheaderDividers.js
@@ -16,10 +16,10 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: theme.palette.background.paper,
   },
   dividerFullWidth: {
-    margin: `5px 0 0 ${theme.spacing(2)}px`,
+    margin: `5px 0 0 ${theme.spacing(2)}`,
   },
   dividerInset: {
-    margin: `5px 0 0 ${theme.spacing(9)}px`,
+    margin: `5px 0 0 ${theme.spacing(9)}`,
   },
 }));
 

diff --git a/docs/src/pages/components/dividers/SubheaderDividers.tsx b/docs/src/pages/components/dividers/SubheaderDividers.tsx
@@ -17,10 +17,10 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.background.paper,
     },
     dividerFullWidth: {
-      margin: `5px 0 0 ${theme.spacing(2)}px`,
+      margin: `5px 0 0 ${theme.spacing(2)}`,
     },
     dividerInset: {
-      margin: `5px 0 0 ${theme.spacing(9)}px`,
+      margin: `5px 0 0 ${theme.spacing(9)}`,
     },
   }),
 );

diff --git a/docs/src/pages/components/drawers/MiniDrawer.js b/docs/src/pages/components/drawers/MiniDrawer.js
@@ -63,9 +63,9 @@ const useStyles = makeStyles((theme) => ({
       duration: theme.transitions.duration.leavingScreen,
     }),
     overflowX: 'hidden',
-    width: theme.spacing(7) + 1,
+    width: `calc(${theme.spacing(7)} + 1px)`,
     [theme.breakpoints.up('sm')]: {
-      width: theme.spacing(9) + 1,
+      width: `calc(${theme.spacing(9)} + 1px)`,
     },
   },
   toolbar: {

diff --git a/docs/src/pages/components/drawers/MiniDrawer.tsx b/docs/src/pages/components/drawers/MiniDrawer.tsx
@@ -69,9 +69,9 @@ const useStyles = makeStyles((theme: Theme) =>
         duration: theme.transitions.duration.leavingScreen,
       }),
       overflowX: 'hidden',
-      width: theme.spacing(7) + 1,
+      width: `calc(${theme.spacing(7)} + 1px)`,
       [theme.breakpoints.up('sm')]: {
-        width: theme.spacing(9) + 1,
+        width: `calc(${theme.spacing(9)} + 1px)`,
       },
     },
     toolbar: {

diff --git a/docs/src/pages/components/grid/AutoGridNoWrap.js b/docs/src/pages/components/grid/AutoGridNoWrap.js
@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme) => ({
   },
   paper: {
     maxWidth: 400,
-    margin: `${theme.spacing(1)}px auto`,
+    margin: `${theme.spacing(1)} auto`,
     padding: theme.spacing(2),
   },
 }));

diff --git a/docs/src/pages/components/grid/AutoGridNoWrap.tsx b/docs/src/pages/components/grid/AutoGridNoWrap.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     paper: {
       maxWidth: 400,
-      margin: `${theme.spacing(1)}px auto`,
+      margin: `${theme.spacing(1)} auto`,
       padding: theme.spacing(2),
     },
   }),

diff --git a/docs/src/pages/components/slider/CustomizedSlider.js b/docs/src/pages/components/slider/CustomizedSlider.js
@@ -7,7 +7,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    width: 300 + theme.spacing(3) * 2,
+    width: `calc(300px + ${theme.spacing(6)})`,
   },
   margin: {
     height: theme.spacing(3),

diff --git a/docs/src/pages/components/slider/CustomizedSlider.tsx b/docs/src/pages/components/slider/CustomizedSlider.tsx
@@ -12,7 +12,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: 300 + theme.spacing(3) * 2,
+      width: `calc(300px + ${theme.spacing(6)})`,
     },
     margin: {
       height: theme.spacing(3),

diff --git a/docs/src/pages/customization/spacing/spacing-de.md b/docs/src/pages/customization/spacing/spacing-de.md
@@ -49,7 +49,7 @@ theme.spacing(2); // = 8
 Der `theme.spacing ()` Helfer akzeptiert bis zu 4 Argumente. Sie können die Argumente verwenden, um den Boilerplate zu reduzieren.
 
 ```diff
--padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
 +padding: theme.spacing(1, 2), // '8px 16px'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-es.md b/docs/src/pages/customization/spacing/spacing-es.md
@@ -49,7 +49,7 @@ theme.spacing(2); // = 8
 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`, // '8px 16px'
+-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
 +padding: theme.spacing(1, 2), // '8px 16px'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-fr.md b/docs/src/pages/customization/spacing/spacing-fr.md
@@ -49,7 +49,7 @@ theme.spacing(2); // = 8
 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`, // '8px 16px'
+-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
 +padding: theme.spacing(1, 2), // '8px 16px'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-ja.md b/docs/src/pages/customization/spacing/spacing-ja.md
@@ -49,7 +49,7 @@ theme.spacing(2); // = 8
 `theme.spacing()` ヘルパーは最大4つの引数を受け入れます。 You can use the arguments to reduce the boilerplate.
 
 ```diff
--padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
 +padding: theme.spacing(1, 2), // '8px 16px'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-pt.md b/docs/src/pages/customization/spacing/spacing-pt.md
@@ -49,7 +49,7 @@ theme.spacing(2); // = 8
 O auxiliar ` theme.spacing()` aceita até 4 argumentos. Você pode usar os argumentos para reduzir o trabalho.
 
 ```diff
--padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
 +padding: theme.spacing(1, 2), // '8px 16px'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-ru.md b/docs/src/pages/customization/spacing/spacing-ru.md
@@ -49,7 +49,7 @@ theme.spacing(2); // = 8
 Вспомогательная функция ` theme.spacing () ` принимает до 4 аргументов. Вы можете использовать аргументы, чтобы уменьшить шаблон.
 
 ```diff
--padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
 +padding: theme.spacing(1, 2), // '8px 16px'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing-zh.md b/docs/src/pages/customization/spacing/spacing-zh.md
@@ -49,7 +49,7 @@ theme.spacing(2); // = 8
 ` theme.spacing() ` 最多接受4个参数。 你可以使用参数来减少样板代码(boilerplate)。
 
 ```diff
--padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
 +padding: theme.spacing(1, 2), // '8px 16px'
 ```
 

diff --git a/docs/src/pages/customization/spacing/spacing.md b/docs/src/pages/customization/spacing/spacing.md
@@ -50,7 +50,7 @@ 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`, // '8px 16px'
+-padding: `${theme.spacing(1)} ${theme.spacing(2)}`, // '8px 16px'
 +padding: theme.spacing(1, 2), // '8px 16px'
 ```
 

diff --git a/docs/src/pages/getting-started/templates/checkout/Checkout.js b/docs/src/pages/getting-started/templates/checkout/Checkout.js
@@ -35,7 +35,7 @@ const useStyles = makeStyles((theme) => ({
     width: 'auto',
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(2),
-    [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
+    [theme.breakpoints.up('md')]: {
       width: 600,
       marginLeft: 'auto',
       marginRight: 'auto',
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({
     marginTop: theme.spacing(3),
     marginBottom: theme.spacing(3),
     padding: theme.spacing(2),
-    [theme.breakpoints.up(600 + theme.spacing(3) * 2)]: {
+    [theme.breakpoints.up('md')]: {
       marginTop: theme.spacing(6),
       marginBottom: theme.spacing(6),
       padding: theme.spacing(3),

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -80,6 +80,30 @@ For a smoother transition, the `adaptV4Theme` helper allows you to iteratively u
   +},
   ```
 
+- `theme.spacing` now returns single values with px units by default.
+  This change improves the integration with styled-components & emotion.
+
+  Before:
+
+  ```
+  theme.spacing(2) => 16
+  ```
+
+  After:
+
+  ```
+  theme.spacing(2) => '16px'
+  ```
+
+  You can restore the previous behavior with:
+
+  ```diff
+  -const theme = createMuiTheme();
+  +const theme = createMuiTheme({
+  +  spacing: x => x * 8,
+  +});
+  ```
+
 - The `theme.palette.text.hint` key was unused in Material-UI components, and has been removed.
 
 ```diff

diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.js
@@ -35,12 +35,12 @@ const styles = (theme) => ({
   [inputSyleMapping['small']]: {
     fontSize: 14,
     padding: theme.spacing(1),
-    width: `calc(100% - ${theme.spacing(2)}px)`,
+    width: `calc(100% - ${theme.spacing(2)})`,
   },
   [inputSyleMapping['medium']]: {
     fontSize: 16,
     padding: theme.spacing(2),
-    width: `calc(100% - ${theme.spacing(4)}px)`,
+    width: `calc(100% - ${theme.spacing(4)})`,
   },
   [inputSyleMapping['large']]: {
     fontSize: 18,

diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/TextField.tsx b/docs/src/pages/premium-themes/onepirate/modules/components/TextField.tsx
@@ -38,12 +38,12 @@ const styles = (theme: any) =>
     [inputSyleMapping['small']]: {
       fontSize: 14,
       padding: theme.spacing(1),
-      width: `calc(100% - ${theme.spacing(2)}px)`,
+      width: `calc(100% - ${theme.spacing(2)})`,
     },
     [inputSyleMapping['medium']]: {
       fontSize: 16,
       padding: theme.spacing(2),
-      width: `calc(100% - ${theme.spacing(4)}px)`,
+      width: `calc(100% - ${theme.spacing(4)})`,
     },
     [inputSyleMapping['large']]: {
       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
@@ -35,21 +35,21 @@ const styles = (theme) => ({
     height: 4,
     width: 73,
     display: 'block',
-    margin: `${theme.spacing(1)}px auto 0`,
+    margin: `${theme.spacing(1)} auto 0`,
     backgroundColor: theme.palette.secondary.main,
   },
   [markSyleMapping['center']['h3']]: {
     height: 4,
     width: 55,
     display: 'block',
-    margin: `${theme.spacing(1)}px auto 0`,
+    margin: `${theme.spacing(1)} auto 0`,
     backgroundColor: theme.palette.secondary.main,
   },
   [markSyleMapping['center']['h4']]: {
     height: 4,
     width: 55,
     display: 'block',
-    margin: `${theme.spacing(1)}px auto 0`,
+    margin: `${theme.spacing(1)} auto 0`,
     backgroundColor: theme.palette.secondary.main,
   },
   [markSyleMapping['left']['h6']]: {

diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Typography.tsx b/docs/src/pages/premium-themes/onepirate/modules/components/Typography.tsx
@@ -42,21 +42,21 @@ const styles = (theme: Theme) =>
       height: 4,
       width: 73,
       display: 'block',
-      margin: `${theme.spacing(1)}px auto 0`,
+      margin: `${theme.spacing(1)} auto 0`,
       backgroundColor: theme.palette.secondary.main,
     },
     [markSyleMapping['center']['h3']]: {
       height: 4,
       width: 55,
       display: 'block',
-      margin: `${theme.spacing(1)}px auto 0`,
+      margin: `${theme.spacing(1)} auto 0`,
       backgroundColor: theme.palette.secondary.main,
     },
     [markSyleMapping['center']['h4']]: {
       height: 4,
       width: 55,
       display: 'block',
-      margin: `${theme.spacing(1)}px auto 0`,
+      margin: `${theme.spacing(1)} auto 0`,
       backgroundColor: theme.palette.secondary.main,
     },
     [markSyleMapping['left']['h6']]: {

diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.js
@@ -70,7 +70,7 @@ const styles = (theme) => ({
   },
   imageTitle: {
     position: 'relative',
-    padding: `${theme.spacing(2)}px ${theme.spacing(4)}px 14px`,
+    padding: `${theme.spacing(2)} ${theme.spacing(4)} 14px`,
   },
   imageMarked: {
     height: 3,