[theme] Support string args in theme.spacing

docs/src/pages/customization/spacing/spacing.md

@@ -47,14 +47,15 @@ theme.spacing(2); // = 8
 ## Multiple arity
 
 The `theme.spacing()` helper accepts up to 4 arguments.
-You can use the arguments to reduce the boilerplate. Instead of doing:
+You can use the arguments to reduce the boilerplate.
 
-```js
-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+```diff
+-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
++padding: theme.spacing(1, 2), // '8px 16px'
 ```
 
-you can do:
+Mixing string values is also supported:
 
 ```js
-padding: theme.spacing(1, 2), // '8px 16px'
+margin: theme.spacing(1, 'auto'), // '8px auto'
 ```

packages/material-ui/src/styles/createSpacing.js

@@ -33,8 +33,11 @@ export default function createSpacing(spacingInput = 8) {
     }
 
     return args
-      .map((factor) => {
-        const output = transform(factor);
+      .map((argument) => {
+        if (typeof argument === 'string') {
+          return argument;
+        }
+        const output = transform(argument);
         return typeof output === 'number' ? `${output}px` : output;
       })
       .join(' ');

packages/material-ui/src/styles/createSpacing.test.js

@@ -38,6 +38,14 @@ describe('createSpacing', () => {
     expect(spacing(1, 2)).to.equal('0.25rem 0.5rem');
   });
 
+  it('should support string arguments', () => {
+    let spacing;
+    spacing = createSpacing();
+    expect(spacing(1, 'auto')).to.equal('8px auto');
+    spacing = createSpacing((factor) => `${0.25 * factor}rem`);
+    expect(spacing(1, 'auto', 2, 3)).to.equal('0.25rem auto 0.5rem 0.75rem');
+  });
+
   describe('warnings', () => {
     beforeEach(() => {
       consoleErrorMock.spy();