[Box] Add sx prop

docs/src/pages/components/slider-styled/ContinuousSlider.js

@@ -14,7 +14,7 @@ export default function ContinuousSlider() {
   };
 
   return (
-    <Box width={200}>
+    <Box width={300}>
       <Typography id="continuous-slider" gutterBottom>
         Volume
       </Typography>
@@ -37,6 +37,44 @@ export default function ContinuousSlider() {
         Disabled slider
       </Typography>
       <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
+      <Typography gutterBottom>Regular Box</Typography>
+      <Box
+        component="span"
+        sx={{
+          p: 1,
+          bgcolor: 'primary.main',
+          color: 'green',
+          ':hover': {
+            backgroundColor: 'secondary.main',
+            border: '1px solid #232323',
+          },
+        }}
+      >
+        <Slider
+          value={value}
+          onChange={handleChange}
+          aria-labelledby="continuous-slider"
+        />
+      </Box>
+      <Typography gutterBottom>Cloned Box</Typography>
+      <Box component="span" color="secondary.main" clone>
+        <Slider
+          value={value}
+          onChange={handleChange}
+          aria-labelledby="continuous-slider"
+        />
+      </Box>
+      <Typography gutterBottom>Children as fn Box</Typography>
+      <Box color="secondary.main">
+        {({ className }) => (
+          <Slider
+            value={value}
+            onChange={handleChange}
+            aria-labelledby="continuous-slider"
+            className={className}
+          />
+        )}
+      </Box>
     </Box>
   );
 }

docs/src/pages/components/slider-styled/ContinuousSlider.tsx

@@ -17,7 +17,7 @@ export default function ContinuousSlider() {
   };
 
   return (
-    <Box width={200}>
+    <Box width={300}>
       <Typography id="continuous-slider" gutterBottom>
         Volume
       </Typography>

packages/material-ui-benchmark/src/system.js

@@ -5,10 +5,10 @@ import ReactDOMServer from 'react-dom/server';
 import styledEmotion from '@emotion/styled';
 import { ThemeProvider as EmotionTheme } from 'emotion-theming';
 import { space, color, fontFamily, fontSize, compose as compose2 } from 'styled-system';
-import { spacing, palette, typography, compose } from '@material-ui/system';
+import { spacing, palette, typography, compose, styleFunctionInversed } from '@material-ui/system';
 import { createMuiTheme } from '@material-ui/core/styles';
-import { styleFunction } from '@material-ui/core/Box';
-import { styled, ThemeProvider as StylesThemeProvider } from '@material-ui/styles';
+import { ThemeProvider as StylesThemeProvider } from '@material-ui/styles';
+import BoxStyles from '@material-ui/core/Box';
 import styledComponents, {
   ThemeProvider as StyledComponentsThemeProvider,
 } from 'styled-components';
@@ -23,10 +23,9 @@ Benchmark.options.minSamples = 100;
 const materialSystem = compose(palette, spacing, typography);
 const styledSystem = compose2(color, space, fontFamily, fontSize);
 
-const BoxStyles = styled('div')(styleFunction);
-const BoxStyleComponents = styledComponents('div')(styleFunction);
+const BoxStyleComponents = styledComponents('div')(styleFunctionInversed);
 const NakedStyleComponents = styledComponents('div')(spacing);
-const BoxEmotion = styledEmotion('div')(styleFunction);
+const BoxEmotion = styledEmotion('div')(styleFunctionInversed);
 
 const BoxMaterialSystem = styledComponents('div')(materialSystem);
 const BoxStyledSystem = styledComponents('div')(styledSystem);
@@ -89,7 +88,7 @@ suite
   })
   // ---
   .add('@material-ui/core all-inclusive', () => {
-    styleFunction({
+    styleFunctionInversed({
       theme: materialSystemTheme,
       color: 'primary.main',
       bgcolor: 'background.paper',

packages/material-ui-system/src/index.d.ts

@@ -215,3 +215,5 @@ export const visuallyHidden: React.CSSProperties;
 
 // utils
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+export const styleFunctionInversed: (props: any) => object;

packages/material-ui-system/src/index.js

@@ -21,3 +21,4 @@ export { default as style } from './style';
 export { default as typography } from './typography';
 export * from './typography';
 export { default as visuallyHidden } from './visuallyHidden';
+export { default as styleFunctionInversed } from './styleFunctionInversed';

packages/material-ui-system/src/palette.js

@@ -12,6 +12,12 @@ export const bgcolor = style({
   themeKey: 'palette',
 });
 
-const palette = compose(color, bgcolor);
+export const backgroundColor = style({
+  prop: 'backgroundColor',
+  cssProperty: 'backgroundColor',
+  themeKey: 'palette',
+});
+
+const palette = compose(color, bgcolor, backgroundColor);
 
 export default palette;

packages/material-ui-system/src/styleFunctionInversed.js

@@ -0,0 +1,118 @@
+import borders from './borders';
+import display from './display';
+import flexbox from './flexbox';
+import grid from './grid';
+import positions from './positions';
+import palette from './palette';
+import shadows from './shadows';
+import sizing from './sizing';
+import spacing from './spacing';
+import typography from './typography';
+
+const filterProps = [
+  ...borders.filterProps,
+  ...display.filterProps,
+  ...flexbox.filterProps,
+  ...grid.filterProps,
+  ...positions.filterProps,
+  ...palette.filterProps,
+  ...shadows.filterProps,
+  ...spacing.filterProps,
+  ...typography.filterProps,
+  'sx',
+];
+
+const getThemeValue = (prop, value, theme) => {
+  const inputProps = {
+    [prop]: value,
+    theme,
+  };
+
+  if (borders.filterProps.indexOf(prop) !== -1) {
+    return borders(inputProps);
+  }
+  if (display.filterProps.indexOf(prop) !== -1) {
+    return display(inputProps);
+  }
+  if (flexbox.filterProps.indexOf(prop) !== -1) {
+    return flexbox(inputProps);
+  }
+  if (grid.filterProps.indexOf(prop) !== -1) {
+    return grid(inputProps);
+  }
+  if (positions.filterProps.indexOf(prop) !== -1) {
+    return positions(inputProps);
+  }
+  if (palette.filterProps.indexOf(prop) !== -1) {
+    return palette(inputProps);
+  }
+  if (shadows.filterProps.indexOf(prop) !== -1) {
+    return shadows(inputProps);
+  }
+  if (sizing.filterProps.indexOf(prop) !== -1) {
+    return sizing(inputProps);
+  }
+  if (spacing.filterProps.indexOf(prop) !== -1) {
+    return spacing(inputProps);
+  }
+  if (typography.filterProps.indexOf(prop) !== -1) {
+    return typography(inputProps);
+  }
+  return { [prop]: value };
+};
+
+const traverseSx = (styles, theme) => {
+  if (!styles) return null;
+
+  if (typeof styles !== 'object') {
+    // value
+    return styles;
+  }
+
+  let css = {};
+
+  Object.keys(styles).forEach((styleKey) => {
+    if (typeof styles[styleKey] === 'object') {
+      if (filterProps.indexOf(styleKey) !== -1) {
+        css = {
+          ...css,
+          ...getThemeValue(styleKey, value, theme),
+        };
+      } else {
+        const transformedValue = traverseSx(styles[styleKey], theme);
+        css[styleKey] = transformedValue;
+      }
+    } else {
+      const value = styles[styleKey];
+      css = {
+        ...css,
+        ...getThemeValue(styleKey, value, theme),
+      };
+    }
+  });
+
+  return css;
+};
+
+const styleFunctionInversed = (props) => {
+  let result = {};
+  Object.keys(props).forEach((prop) => {
+    if (filterProps.indexOf(prop) !== -1) {
+      result = {
+        ...result,
+        ...getThemeValue(prop, props[prop], props.theme),
+      };
+    }
+  });
+
+  let sxValue = traverseSx(props.sx, props.theme);
+
+  return {
+    ...result,
+    ...sxValue,
+  };
+};
+
+styleFunctionInversed.filterProps = filterProps;
+
+export default styleFunctionInversed;

packages/material-ui/src/Box/Box.js

@@ -1,36 +1,10 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import {
-  borders,
-  compose,
-  display,
-  flexbox,
-  grid,
-  palette,
-  positions,
-  shadows,
-  sizing,
-  spacing,
-  typography,
-  css,
-} from '@material-ui/system';
+import React from 'react';
+import * as PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { styleFunctionInversed } from '@material-ui/system';
 import styled from '../styles/experimentalStyled';
 
-export const styleFunction = css(
-  compose(
-    borders,
-    display,
-    flexbox,
-    grid,
-    positions,
-    palette,
-    shadows,
-    sizing,
-    spacing,
-    typography,
-  ),
-);
+export const styleFunction = styleFunctionInversed;
 
 function omit(input, fields) {
   const output = {};
@@ -70,15 +44,15 @@ const BoxRoot = React.forwardRef(function StyledComponent(props, ref) {
   );
 });
 
+const shouldForwardProp = (prop) => styleFunction.filterProps.indexOf(prop) === -1;
+
 BoxRoot.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   clone: PropTypes.bool,
   component: PropTypes.elementType,
 };
 
-const shouldForwardProp = (prop) => styleFunction.filterProps.indexOf(prop) === -1;
-
 /**
  * @ignore - do not document.
  */