diff --git a/docs/src/pages/components/box/BoxClone.js b/docs/src/pages/components/box/BoxClone.js
index 446d8fa4ab11b2..a101300568bcd9 100644
--- a/docs/src/pages/components/box/BoxClone.js
+++ b/docs/src/pages/components/box/BoxClone.js
@@ -4,7 +4,7 @@ import Box from '@material-ui/core/Box';
 
 export default function BoxClone() {
   return (
-    <Box border="1px dashed grey" clone>
+    <Box sx={{ border: '1px dashed grey' }} clone>
       <Button>Save</Button>
     </Box>
   );
diff --git a/docs/src/pages/components/box/BoxClone.tsx b/docs/src/pages/components/box/BoxClone.tsx
index 446d8fa4ab11b2..a101300568bcd9 100644
--- a/docs/src/pages/components/box/BoxClone.tsx
+++ b/docs/src/pages/components/box/BoxClone.tsx
@@ -4,7 +4,7 @@ import Box from '@material-ui/core/Box';
 
 export default function BoxClone() {
   return (
-    <Box border="1px dashed grey" clone>
+    <Box sx={{ border: '1px dashed grey' }} clone>
       <Button>Save</Button>
     </Box>
   );
diff --git a/docs/src/pages/components/box/BoxComponent.js b/docs/src/pages/components/box/BoxComponent.js
index ce331b43e9e107..539477349a51ea 100644
--- a/docs/src/pages/components/box/BoxComponent.js
+++ b/docs/src/pages/components/box/BoxComponent.js
@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
 
 export default function BoxComponent() {
   return (
-    <Box component="span" p={2} border="1px dashed grey">
+    <Box component="span" sx={{ p: 2, border: '1px dashed grey' }}>
       <Button>Save</Button>
     </Box>
   );
diff --git a/docs/src/pages/components/box/BoxComponent.tsx b/docs/src/pages/components/box/BoxComponent.tsx
index ce331b43e9e107..539477349a51ea 100644
--- a/docs/src/pages/components/box/BoxComponent.tsx
+++ b/docs/src/pages/components/box/BoxComponent.tsx
@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
 
 export default function BoxComponent() {
   return (
-    <Box component="span" p={2} border="1px dashed grey">
+    <Box component="span" sx={{ p: 2, border: '1px dashed grey' }}>
       <Button>Save</Button>
     </Box>
   );
diff --git a/docs/src/pages/components/box/BoxRenderProps.js b/docs/src/pages/components/box/BoxRenderProps.js
index 071fe19fe50074..e3dd1724a136d4 100644
--- a/docs/src/pages/components/box/BoxRenderProps.js
+++ b/docs/src/pages/components/box/BoxRenderProps.js
@@ -4,7 +4,7 @@ import Box from '@material-ui/core/Box';
 
 export default function BoxClone() {
   return (
-    <Box border="1px dashed grey">
+    <Box sx={{ border: '1px dashed grey' }}>
       {(props) => <Button {...props}>Save</Button>}
     </Box>
   );
diff --git a/docs/src/pages/components/box/BoxRenderProps.tsx b/docs/src/pages/components/box/BoxRenderProps.tsx
index 6345cc4b077286..759a4c44d4b5ee 100644
--- a/docs/src/pages/components/box/BoxRenderProps.tsx
+++ b/docs/src/pages/components/box/BoxRenderProps.tsx
@@ -4,7 +4,7 @@ import Box from '@material-ui/core/Box';
 
 export default function BoxClone() {
   return (
-    <Box border="1px dashed grey">
+    <Box sx={{ border: '1px dashed grey' }}>
       {(props: { className: string }) => <Button {...props}>Save</Button>}
     </Box>
   );
diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md
index 45d3bf682592f3..065574e08f03dd 100644
--- a/docs/src/pages/components/box/box.md
+++ b/docs/src/pages/components/box/box.md
@@ -16,6 +16,12 @@ It's created using the `experimentalStyled()` function of `@material-ui/core/sty
 
 [The palette](/system/palette/) style function.
 
+## The sx prop
+
+All system properties are available via the `sx` prop. This property allows you to specify any CSS rules you may need, in addition to the ones already available as part of the system. Here is an example of how you can use it:
+
+{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }}
+
 ## Overriding Material-UI components
 
 The Box component wraps your component.
@@ -28,8 +34,8 @@ This works great when the changes can be isolated to a new DOM element.
 For instance, you can change the margin this way.
 
 However, sometimes you have to target the underlying DOM element.
-For instance, you want to change the text color of the button.
-The Button component defines its own color. CSS inheritance doesn't help.
+For instance, you want to change the border of the Button.
+The Button component defines its own styles. CSS inheritance doesn't help.
 To workaround the problem, you have two options:
 
 1. Use [`React.cloneElement()`](https://reactjs.org/docs/react-api.html#cloneelement)
@@ -47,12 +53,6 @@ The Box children accepts a render props function. You can pull out the `classNam
 > ⚠️ The CSS specificity relies on the import order.
 > If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last.
 
-## The sx prop
-
-Sometimes, the props on the Box component are not enough to style the component. To solve this, `Box` supports the `sx` prop. This allows you to specify any CSS rules you want, in addition to the ones already available using system props. Here is an example of how you can use it:
-
-{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }}
-
 ## API
 
 ```jsx
@@ -64,5 +64,4 @@ import Box from '@material-ui/core/Box';
 | <span class="prop-name required">children&nbsp;\*</span> | <span class="prop-type">union:&nbsp;node&nbsp;&#124;<br>&nbsp;func<br></span>                               |                                         | Box render function or node.                                                                          |
 | <span class="prop-name">clone</span>                     | <span class="prop-type">bool</span>                                                                         | <span class="prop-default">false</span> | If `true`, the box will recycle its children DOM element. It's using `React.cloneElement` internally. |
 | <span class="prop-name">component</span>                 | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func&nbsp;&#124;<br>&nbsp;object<br></span> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component.            |
-
-Any other props supplied will be used by [the style functions](/system/basics/#all-inclusive) or spread to the root element.
+| <span class="prop-name">sx</span>                        | <span class="prop-type">object</span>                                                                       | <span class="prop-default">{}</span>    | Accepts all system properties, as well as any valid CSS properties.                                   |
diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js
index 998699a8de06e2..6bbdc356513e2b 100644
--- a/packages/material-ui/src/Box/Box.js
+++ b/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;
diff --git a/packages/material-ui/src/Box/Box.test.js b/packages/material-ui/src/Box/Box.test.js
index fc6de13fd312ca..309b68593d36eb 100644
--- a/packages/material-ui/src/Box/Box.test.js
+++ b/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}>