From 90c4624f57efa7a557589bee4cd8a799484e161f Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Thu, 22 Aug 2024 08:26:58 +0700
Subject: [PATCH] [material-ui] Do not generate CSS variables for a custom
 spacing function (#43389)

---
 .../mui-material/src/styles/createThemeWithVars.js   | 12 +++++-------
 packages/mui-material/src/styles/extendTheme.test.js | 12 ++++++++++--
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/mui-material/src/styles/createThemeWithVars.js b/packages/mui-material/src/styles/createThemeWithVars.js
index b8adb2deefb75e..026f1b9e6ede5d 100644
--- a/packages/mui-material/src/styles/createThemeWithVars.js
+++ b/packages/mui-material/src/styles/createThemeWithVars.js
@@ -64,13 +64,11 @@ function getSpacingVal(spacingInput) {
   if (typeof spacingInput === 'number') {
     return `${spacingInput}px`;
   }
-  if (typeof spacingInput === 'string') {
-    return spacingInput;
-  }
-  if (typeof spacingInput === 'function') {
-    return getSpacingVal(spacingInput(1));
-  }
-  if (Array.isArray(spacingInput)) {
+  if (
+    typeof spacingInput === 'string' ||
+    typeof spacingInput === 'function' ||
+    Array.isArray(spacingInput)
+  ) {
     return spacingInput;
   }
   return '8px';
diff --git a/packages/mui-material/src/styles/extendTheme.test.js b/packages/mui-material/src/styles/extendTheme.test.js
index 00bd6111455fce..94ca22576a7cb0 100644
--- a/packages/mui-material/src/styles/extendTheme.test.js
+++ b/packages/mui-material/src/styles/extendTheme.test.js
@@ -495,8 +495,16 @@ 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) => (val === 'xs' ? '100px' : val),
+      });
+      expect('spacing' in theme.vars).to.equal(false);
+      expect(theme.spacing('xs')).to.equal('100px');
     });
   });