From fe14d4b60d719d36c710a381f78607eeae46d26a Mon Sep 17 00:00:00 2001
From: Alex Ruan <alexruan2222@gmail.com>
Date: Mon, 14 Dec 2020 14:46:33 -0500
Subject: [PATCH] [system] Fix transform not firing when theme provided
 (#24010)

---
 packages/material-ui-system/src/style.js      |  6 ++---
 packages/material-ui-system/src/style.test.js | 26 +++++++++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/packages/material-ui-system/src/style.js b/packages/material-ui-system/src/style.js
index 30fa2221f261bb..d495c748369524 100644
--- 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
index b7fe8a38a8c253..be2f48a8c82730 100644
--- 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',