[material-ui] Do not generate CSS variables for a custom spacing function

packages/mui-material/src/styles/createThemeWithVars.js

@@ -68,7 +68,7 @@ function getSpacingVal(spacingInput) {
     return spacingInput;
   }
   if (typeof spacingInput === 'function') {
-    return getSpacingVal(spacingInput(1));
+    return spacingInput;
   }
   if (Array.isArray(spacingInput)) {
     return spacingInput;

packages/mui-material/src/styles/extendTheme.test.js

@@ -495,8 +495,28 @@ describe('extendTheme', () => {
 
     it('can be customized as a function', () => {
       const theme = extendTheme({ spacing: (factor) => `${0.25 * factor}rem` });
-      expect(theme.vars.spacing).to.deep.equal('var(--mui-spacing, 0.25rem)');
-      expect(theme.spacing(2)).to.equal('calc(2 * var(--mui-spacing, 0.25rem))');
+      expect('spacing' in theme.vars).to.equal(false);
+      expect(theme.spacing(2)).to.equal('0.5rem');
+    });
+
+    it('a custom function should not be altered', () => {
+      const theme = extendTheme({
+        spacing: (val) => {
+          const base = 8;
+
+          if (val === 'xs') {
+            return `100px`;
+          }
+
+          if (typeof val === 'string') {
+            return val;
+          }
+
+          return `${Number(val) * base}px`;
+        },
+      });
+      expect('spacing' in theme.vars).to.equal(false);
+      expect(theme.spacing('xs')).to.equal('100px');
     });
   });