[Box] Deprecate system props

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

@@ -16,6 +16,8 @@ function omit(input, fields) {
   return output;
 }
 
+let warnedOnce = false;
+
 /**
  * @ignore - do not document.
  */
@@ -24,6 +26,17 @@ const BoxRoot = React.forwardRef(function StyledComponent(props, ref) {
 
   const spread = omit(other, styleFunction.filterProps);
 
+  if (process.env.NODE_ENV !== 'production') {
+    if (!warnedOnce && Object.keys(spread).length !== Object.keys(other).length) {
+      warnedOnce = true;
+      console.warn(
+        'Material-UI: You are using deprecated props on the Box component.\n' +
+          'You should move the properties inside the `sx` prop. For example:\n' +
+          '<Box m={2} /> should become <Box sx={{ m: 2 }} />',
+      );
+    }
+  }
+
   if (clone) {
     return React.cloneElement(children, {
       className: clsx(children.props.className, className),
@@ -49,11 +62,9 @@ BoxRoot.propTypes = {
   component: PropTypes.elementType,
 };
 
-const shouldForwardProp = (prop) => styleFunction.filterProps.indexOf(prop) === -1;
-
 /**
  * @ignore - do not document.
  */
-const Box = styled(BoxRoot, { shouldForwardProp }, { muiName: 'MuiBox' })(styleFunction);
+const Box = styled(BoxRoot, {}, { muiName: 'MuiBox' })(styleFunction);
 
 export default Box;

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

@@ -19,6 +19,18 @@ describe('<Box />', () => {
     </div>
   );
 
+  it('warns if system props are used directly on the Box component', () => {
+    expect(() => {
+      render(
+        <Box
+          color="primary.main"
+          fontFamily="Comic Sans"
+          fontSize={{ xs: 'h6.fontSize', sm: 'h4.fontSize', md: 'h3.fontSize' }}
+        />,
+      );
+    }).toWarnDev('Material-UI: You are using deprecated props on the Box component.\n');
+  });
+
   it('renders children and box content', () => {
     const { container, getByTestId } = render(
       <Box component="span" m={1}>