[system] Fix transform not firing when theme provided (#24010)

mui · Dec 14, 2020 · fe14d4b · fe14d4b
1 parent 994e14f
commit fe14d4b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/packages/material-ui-system/src/style.js b/packages/material-ui-system/src/style.js
@@ -19,10 +19,10 @@ function getValue(themeMapping, transform, propValueFinal, userValue = propValue
     value = themeMapping[propValueFinal] || userValue;
   } else {
     value = getPath(themeMapping, propValueFinal) || userValue;
+  }
 
-    if (transform) {
-      value = transform(value);
-    }
+  if (transform) {
+    value = transform(value);
   }
 
   return value;

diff --git a/packages/material-ui-system/src/style.test.js b/packages/material-ui-system/src/style.test.js
@@ -118,6 +118,32 @@ describe('style', () => {
     });
   });
 
+  it('should transform the property correctly using theme', () => {
+    const vSpacingWithTheme = style({
+      prop: 'vSpacing',
+      cssProperty: false,
+      themeKey: 'spacing',
+      transform: (value) => ({
+        '& > :not(:last-child)': {
+          marginBottom: value,
+        },
+      }),
+    });
+
+    const output = vSpacingWithTheme({
+      theme: {
+        spacing: (value) => value * 2,
+      },
+      vSpacing: 8,
+    });
+
+    expect(output).to.deep.equal({
+      '& > :not(:last-child)': {
+        marginBottom: 16,
+      },
+    });
+  });
+
   it('should fallback to composed theme keys', () => {
     const fontWeight = style({
       prop: 'fontWeight',