[docs] More explicit breakpoint documentation in sx

docs/src/pages/components/box/box.md

@@ -16,9 +16,10 @@ It's created using the `experimentalStyled()` function of `@material-ui/core/sty
 
 [The palette](/system/palette/) style function.
 
-## The sx prop
+## The `sx` prop
 
-All system properties are available via the `sx` prop. In addition, this prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it:
+All system properties are available via the [`sx` prop](/system/basics/#the-sx-prop).
+In addition, the `sx` prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it:
 
 {{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }}
 

docs/src/pages/customization/how-to-customize/how-to-customize.md

@@ -20,7 +20,8 @@ You might need to change the style of a component for a specific implementation,
 
 ### Use the `sx` prop
 
-The easiest way to add style overrides for a one-off situation is to use the `sx` prop available on all Material-UI components. Here is an example:
+The easiest way to add style overrides for a one-off situation is to use the [`sx` prop](/system/basics/#the-sx-prop) available on all Material-UI components.
+Here is an example:
 
 {{"demo": "pages/customization/how-to-customize/SxProp.js"}}
 

docs/src/pages/system/advanced/advanced.md

@@ -4,12 +4,15 @@
 
 ## Adding the `sx` prop to your custom components
 
-The `unstable_styleFunctionSx` utility adds the support for the `sx` to your own components. Normally you would use the `Box` components from `@material-ui/core` at the root of your component tree. If you would like to use the system independently from Material-UI, this utility will give you the same capabilities, while having a smaller bundle size.
+The `unstable_styleFunctionSx` utility adds the support for the [`sx` prop](/system/basics/#the-sx-prop) to your own components.
+Normally you would use the `Box` component from `@material-ui/core` at the root of your component tree.
+If you would like to use the system independently from Material-UI, the `unstable_styleFunctionSx` utility will give you the same capabilities, while having a smaller bundle size.
 
 {{"demo": "pages/system/advanced/StyleFunctionSxDemo.js"}}
 
 ## Using standalone system utilities
 
-If you only need some elements of the system in your custom components, you can directly use and combine the different style functions available, and access them as component props. You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the `sx` supports, and a different API.
+If you only need some elements of the system in your custom components, you can directly use and combine the different style functions available, and access them as component props.
+You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the [`sx` prop](/system/basics/#the-sx-prop) supports, and a different API.
 
 {{"demo": "pages/system/advanced/CombiningStyleFunctionsDemo.js", "defaultCodeOpen": true}}

docs/src/pages/system/basics/BreakpointsAsObject.js

@@ -4,7 +4,17 @@ import Box from '@material-ui/core/Box';
 export default function BreakpointsAsObject() {
   return (
     <div>
-      <Box sx={{ width: { xs: 100, sm: 200, md: 300, lg: 400, xl: 500 } }}>
+      <Box
+        sx={{
+          width: {
+            xs: 100, // theme.breakpoints.up('xs')
+            sm: 200, // theme.breakpoints.up('sm')
+            md: 300, // theme.breakpoints.up('md')
+            lg: 400, // theme.breakpoints.up('lg')
+            xl: 500, // theme.breakpoints.up('xl')
+          },
+        }}
+      >
         This box has a responsive width.
       </Box>
     </div>

docs/src/pages/system/basics/BreakpointsAsObject.tsx

@@ -4,7 +4,17 @@ import Box from '@material-ui/core/Box';
 export default function BreakpointsAsObject() {
   return (
     <div>
-      <Box sx={{ width: { xs: 100, sm: 200, md: 300, lg: 400, xl: 500 } }}>
+      <Box
+        sx={{
+          width: {
+            xs: 100, // theme.breakpoints.up('xs')
+            sm: 200, // theme.breakpoints.up('sm')
+            md: 300, // theme.breakpoints.up('md')
+            lg: 400, // theme.breakpoints.up('lg')
+            xl: 500, // theme.breakpoints.up('xl')
+          },
+        }}
+      >
         This box has a responsive width.
       </Box>
     </div>

docs/src/pages/system/basics/basics.md

@@ -211,7 +211,7 @@ Here is an example leveraging them:
     color: 'primary.main', // theme.palette.primary.main
     m: 1, // margin: theme.spacing(1)
     p: {
-      xs: 1, // [theme.breakpoints.up('xs')]: : { padding: theme.spacing(1) }
+      xs: 1, // [theme.breakpoints.up('xs')]: { padding: theme.spacing(1) }
     },
     zIndex: 'tooltip', // theme.zIndex.tooltip
   }}
@@ -270,7 +270,10 @@ If you would like to have responsive values for a CSS property, you can use the
 
 #### 1. Breakpoints as an object
 
-The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Here is the previous example again, using the object syntax.
+The first option for defining breakpoints is to define them as an object, using the breakpoints as keys.
+Note that each breakpoint property matches the breakpoint and every larger breakpoint.
+For example, `width: { lg: 100 }` is equivalent to `theme.breakpoints.up('lg')`.
+Here is the previous example again, using the object syntax.
 
 {{"demo": "pages/system/basics/BreakpointsAsObject.js"}}