[system] Remove theme/styling allocations

packages/mui-material/src/Button/Button.js

@@ -86,7 +86,7 @@ const ButtonRoot = styled(ButtonBase, {
       ownerState.fullWidth && styles.fullWidth,
     ];
   },
-})(({ theme }) => {
+})(styled.fromTheme(theme => {
   const inheritContainedBackgroundColor =
     theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
 
@@ -297,7 +297,7 @@ const ButtonRoot = styled(ButtonBase, {
       },
     ],
   };
-});
+}));
 
 const ButtonStartIcon = styled('span', {
   name: 'MuiButton',

packages/mui-material/src/Checkbox/Checkbox.js

@@ -50,7 +50,8 @@ const CheckboxRoot = styled(SwitchBase, {
       ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`],
     ];
   },
-})(({ theme }) => ({
+
+})(styled.fromTheme(theme => ({
   color: (theme.vars || theme).palette.text.secondary,
   variants: [
     {
@@ -101,7 +102,7 @@ const CheckboxRoot = styled(SwitchBase, {
       },
     },
   ],
-}));
+})));
 
 const defaultCheckedIcon = <CheckBoxIcon />;
 const defaultIcon = <CheckBoxOutlineBlankIcon />;

packages/mui-material/src/Paper/Paper.js

@@ -39,7 +39,7 @@ const PaperRoot = styled('div', {
       ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`],
     ];
   },
-})(({ theme }) => ({
+})(styled.fromTheme((theme) => ({
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
   transition: theme.transitions.create('box-shadow'),
@@ -68,7 +68,7 @@ const PaperRoot = styled('div', {
       },
     },
   ],
-}));
+})));
 
 const Paper = React.forwardRef(function Paper(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiPaper' });

packages/mui-styled-engine/src/index.d.ts

@@ -154,6 +154,18 @@ export interface CreateStyledComponent<
       Interpolation<ComponentProps & SpecificComponentProps & AdditionalProps & { theme: T }>
     >
   ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
+
+  /**
+   * Create a styling function memoized on theme.
+   */
+  fromTheme(style: (theme: T) => object): (theme: T) => object;
+
+  /**
+   * Create a styling function memoized on props.
+   */
+  fromProps(
+    style: (theme: FunctionInterpolation<ComponentProps & SpecificComponentProps & { theme: T }>) => object
+  ): (theme: T) => object;
 }
 
 export interface CreateMUIStyled<

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

@@ -250,9 +250,77 @@ export default function createStyled(input = {}) {
     return muiStyledResolver;
   };
 
+  styled.fromTheme = fromTheme;
+  styled.fromProps = fromProps;
+
   return styled;
 }
 
+/**
+ * Memoize style function on props.theme
+ */
+function fromTheme(styleFn) {
+  let lastValue;
+  let lastTheme;
+
+  return (props) => {
+    const theme = props.theme;
+    let value = lastValue;
+    if (value === undefined || theme !== lastTheme) {
+      value = styleFn(theme);
+
+      lastValue = value;
+      lastTheme = theme;
+    }
+    return value;
+  };
+}
+
+/**
+ * Memoize style function on props
+ */
+function fromProps(styleFn) {
+  let lastValue;
+  let lastAccesses = new Map();
+
+  function didChange(newProps) {
+    for (const entry in lastAccesses.entries()) {
+      if (newProps[entry[0]] !== entry[1]) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function createProxy(props) {
+    const proxy = {}
+    for (const key in props) {
+      if (Object.prototype.hasOwnProperty.call(props, key)) {
+        Object.defineProperty(proxy, key, {
+          get: () => {
+            const value = props[key];
+            lastAccesses.set(key, value)
+            return value;
+          }
+        })
+      }
+    }
+    return proxy;
+  }
+
+  return (props) => {
+    let value = lastValue;
+    if (value === undefined || didChange(props)) {
+      lastAccesses.clear()
+
+      value = styleFn(createProxy(props));
+
+      lastValue = value;
+    }
+    return value;
+  };
+}
+
 function isObjectEmpty(object) {
   // eslint-disable-next-line
   for (const _ in object) {