[Container] Document the classes API (#15919)

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

@@ -5,6 +5,7 @@ import { withStyles } from '../styles';
 import { capitalize } from '../utils';
 
 export const styles = theme => ({
+  /* Styles applied to the root element. */
   root: {
     width: '100%',
     marginLeft: 'auto',
@@ -21,6 +22,7 @@ export const styles = theme => ({
       paddingRight: theme.spacing(4),
     },
   },
+  /* Styles applied to the root element if `fixed={true}`. */
   fixed: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
     const value = theme.breakpoints.values[breakpoint];
 
@@ -31,26 +33,31 @@ export const styles = theme => ({
     }
     return acc;
   }, {}),
+  /* Styles applied to the root element if `maxWidth="xs"`. */
   maxWidthXs: {
     [theme.breakpoints.up('xs')]: {
       maxWidth: Math.max(theme.breakpoints.values.xs, 444),
     },
   },
+  /* Styles applied to the root element if `maxWidth="sm"`. */
   maxWidthSm: {
     [theme.breakpoints.up('sm')]: {
       maxWidth: theme.breakpoints.values.sm,
     },
   },
+  /* Styles applied to the root element if `maxWidth="md"`. */
   maxWidthMd: {
     [theme.breakpoints.up('md')]: {
       maxWidth: theme.breakpoints.values.md,
     },
   },
+  /* Styles applied to the root element if `maxWidth="lg"`. */
   maxWidthLg: {
     [theme.breakpoints.up('lg')]: {
       maxWidth: theme.breakpoints.values.lg,
     },
   },
+  /* Styles applied to the root element if `maxWidth="xl"`. */
   maxWidthXl: {
     [theme.breakpoints.up('xl')]: {
       maxWidth: theme.breakpoints.values.xl,

pages/api/container.md

@@ -33,13 +33,16 @@ Any other properties supplied will be provided to the root element (native eleme
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 
-- `root`
-- `fixed`
-- `maxWidthXs`
-- `maxWidthSm`
-- `maxWidthMd`
-- `maxWidthLg`
-- `maxWidthXl`
+
+| Name | Description |
+|:-----|:------------|
+| <span class="prop-name">root</span> | Styles applied to the root element.
+| <span class="prop-name">fixed</span> | Styles applied to the root element if `fixed={true}`.
+| <span class="prop-name">maxWidthXs</span> | Styles applied to the root element if `maxWidth="xs"`.
+| <span class="prop-name">maxWidthSm</span> | Styles applied to the root element if `maxWidth="sm"`.
+| <span class="prop-name">maxWidthMd</span> | Styles applied to the root element if `maxWidth="md"`.
+| <span class="prop-name">maxWidthLg</span> | Styles applied to the root element if `maxWidth="lg"`.
+| <span class="prop-name">maxWidthXl</span> | Styles applied to the root element if `maxWidth="xl"`.
 
 Have a look at the [overriding styles with classes](/customization/components/#overriding-styles-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Container/Container.js)