[Theming] theme.spacing doesn't accept multiple string arguments

Using a custom function for theme.spacing with multiple arguments (theme.spacing("xs", "sm")) used to work in v4.8, now it doesn’t.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Given a custom spacing function like:

const customSpacing = key => {
  const mySpacings = { xs: 10, sm: 30, lg: 50 };
  return mySpacings[key] || key;
};

And applying it like so: padding: theme.spacing("sm", "xs")

The output is: padding: sm xs

Expected Behavior 🤔

Expected the output to be padding: 30px 10px

Steps to Reproduce 🕹

CodeSandbox of the example above: https://codesandbox.io/s/material-demo-sv3h3?file=/demo.js:430-455

If you change to "@material-ui/core": "~4.8.0" it works fine

Steps:

1. Notice how the div padding isn’t properly applied (inspect the red div element)

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.10.0
React
Browser
TypeScript
etc.

[oliviertassinari]

As I user, I expected that by using a custom function, its result wouldn’t be “hijacked” in some special cases

@zettca Thanks for sharing more details on how you use the spacing function. I think that we all agree that it’s the desired direction to go into. The question at stake is: how?

[GuilleDF]

I can implement @oliviertassinari’s proposed solution, if that’s okay with you guys 😃