move out padding styles for Container

packages/material-ui/src/Container/Container.d.ts

@@ -10,6 +10,7 @@ export interface ContainerProps
 
 export type ContainerClassKey =
   | 'root'
+  | 'gutters'
   | 'fixed'
   | 'maxWidthXs'
   | 'maxWidthSm'

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

@@ -5,11 +5,15 @@ import { withStyles } from '../styles';
 import { capitalize } from '../utils';
 
 export const styles = theme => ({
+  /* Styles applied to the root element. */
   root: {
     width: '100%',
     marginLeft: 'auto',
     boxSizing: 'border-box',
     marginRight: 'auto',
+  },
+  /* Styles applied to the root element for padding. */
+  gutters: {
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
@@ -21,6 +25,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 +36,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,
@@ -72,6 +82,7 @@ const Container = React.forwardRef(function Container(props, ref) {
     <Component
       className={clsx(
         classes.root,
+        classes.gutters,
         {
           [classes.fixed]: fixed,
           [classes[`maxWidth${capitalize(String(maxWidth))}`]]: maxWidth !== false,

pages/api/container.md

@@ -33,13 +33,17 @@ 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">gutters</span> | Styles applied to the root element for padding.
+| <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)