fix spacing

packages/mui-system/src/spacing/spacing.js

@@ -96,31 +96,32 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   const themeSpacing = getPath(theme, themeKey, true) ?? defaultValue;
 
   if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
-    return (abs) => {
-      if (typeof abs === 'string') {
-        return abs;
+    return (val) => {
+      if (typeof val === 'string') {
+        return val;
       }
 
       if (process.env.NODE_ENV !== 'production') {
-        if (typeof abs !== 'number') {
+        if (typeof val !== 'number') {
           console.error(
-            `MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`,
+            `MUI: Expected ${propName} argument to be a number or a string, got ${val}.`,
           );
         }
       }
 
       if (typeof themeSpacing === 'string') {
-        return `calc(${abs} * ${themeSpacing})`;
+        return `calc(${val} * ${themeSpacing})`;
       }
-      return themeSpacing * abs;
+      return themeSpacing * val;
     };
   }
 
   if (Array.isArray(themeSpacing)) {
-    return (abs) => {
-      if (typeof abs === 'string') {
-        return abs;
+    return (val) => {
+      if (typeof val === 'string') {
+        return val;
       }
+      const abs = Math.abs(val);
 
       if (process.env.NODE_ENV !== 'production') {
         if (!Number.isInteger(abs)) {
@@ -141,7 +142,17 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
         }
       }
 
-      return themeSpacing[abs];
+      const transformed = themeSpacing[abs];
+
+      if (val >= 0) {
+        return transformed;
+      }
+
+      if (typeof transformed === 'number') {
+        return -transformed;
+      }
+
+      return `-${transformed}`;
     };
   }
 
@@ -170,18 +181,7 @@ export function getValue(transformer, propValue) {
     return propValue;
   }
 
-  const abs = Math.abs(propValue);
-  const transformed = transformer(abs);
-
-  if (propValue >= 0) {
-    return transformed;
-  }
-
-  if (typeof transformed === 'number') {
-    return -transformed;
-  }
-
-  return `-${transformed}`;
+  return transformer(propValue);
 }
 
 export function getStyleFromPropValue(cssProperties, transformer) {

packages/mui-system/src/spacing/spacing.test.js

@@ -47,6 +47,16 @@ describe('system spacing', () => {
         expect(output1).to.deep.equal({ padding: 'calc(2 * 4px)' });
       });
 
+      it('should be able to use string value with negative amount', () => {
+        const output1 = spacing({
+          theme: {
+            spacing: '4px',
+          },
+          p: -2,
+        });
+        expect(output1).to.deep.equal({ padding: 'calc(-2 * 4px)' });
+      });
+
       it('should use the provided value directly if theme.spacing is a string', () => {
         const output1 = spacing({
           theme: {