[theme] Always return default spacing value with px units

[mbrookes]

Breaking changes

• 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:

  -const theme = createMuiTheme();
  +const theme = createMuiTheme({
  +  spacing: x => x * 8,
  +});

---

Closes #16205

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 44b8dcf

[oliviertassinari]

I'm not sure how to handle cases like:

https://github.com/mui-org/material-ui/blob/7a4bd5807959b0069be9b5f40ba80eaae9ace2c8/docs/src/pages/components/slider/CustomizedSlider.tsx#L15

[mbrookes]

width: 300 + parseInt(theme.spacing(6).slice(0, -2));

😄

It's the problem that @joshwooding raised here: #16205 (comment)

[mbrookes]

How about if theme.spacing() accepted the unit to append, and treated an empty string as a special case?:

> theme.spacing(1)
'8px'
> theme.spacing([1, 'rem'])
'8rem'
> theme.spacing([1, ''])
8

[oliviertassinari]

I have tried to benchmark what the others are doing here.

• styled-system: nothing. Last year they removed the px unit in V5 styled-system/styled-system#513, which is fine for the JavaScript syntax but not for the CSS template one: https://codesandbox.io/s/immutable-wildflower-9txlp?file=/src/App.js.
• xstyled: I couldn't find anything related.
• spacing-helper: It looks a lot like what we provide. No solution.

How about if theme.spacing() accepted the unit to append, and treated an empty string as a special case?:

I think that it would leak the intent, so not working.

---

I wonder if the best answer here isn't on CSS land: calc(). If you take the above example, the motivation is to have 300px and 2 spacing unit (in whatever CSS unit) on each side. @mbrookes Would it work, it seems to?

[mbrookes]

@mbrookes Would it work, it seems to?

Perfect - it even works in IE.

[mbrookes]

Hmm:

padding: theme.spacing(0.5, 0, 0.5, `${Math.max(0, theme.spacing(1) - 3)}px`),

CSS max() isn't supported in IE: https://caniuse.com/?search=max()

[mbrookes]

Also:

    [theme.breakpoints.up(600 + theme.spacing(2) * 2)]: {
      width: 600,
      marginLeft: 'auto',
      marginRight: 'auto',
    },

[oliviertassinari]

@mbrookes For the first case we can use px, and the second a breakpoint value, md?

[mbrookes]

I'm not sure what the second was about (and I wrote it! 😅 ) – it seems to work just the same with 'md'.

I don't understand what you mean for the first - it is in px?

[oliviertassinari]

I don't understand what you mean for the first - it is in px?

Sorry for the confusion, I meant using hardcoded pixels, not. The value from the theme.