Document theme.mixins.gutters()

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I was following https://material-ui.com/layout/grid/ to get a basic app set up. After copying and pasting the examples on that page, the grid had no gutter on the left and right hand side of the page.

Adding theme.mixins.gutters() to the root class produced the behaviour I wanted.

const styles = theme => ({
  root: {
    ...theme.mixins.gutters(),
    flexGrow: 1
  }
});

Current Behavior

I first looked at the example apps, but these were all centred, so didn’t suffer from the same issue. Next, I dug through the source code of the Toolbar, which did what I expected, where I found the mixin.

This seems pretty essential for building any left-aligned app, so I would have expected it to be in the getting started guide. I had a bad on-boarding experience due to this.

[QzSG]

Please add this to the documentation asap, was about to implement my own breakpoint styles before I found this after pages of searching

[QzSG]

A quick code search on GitHub lists lots of existing MUI sites using theme.mixins.gutters for responsive left and right padding (gutters) between desktop and mobile screens. Not sure if official documentation were ever added for the gutters mixin, but the fact that thousands (44k on a rough search albeit most should no longer be maintained) of repositories are using the same mixin in their existing MUI styles seem to suggest it being a popular method to settle responsive gutters. I guess a small article on migrating from the old theme.mixins.gutters to the mentioned Container component would be nice. I am thinking if there are uses for when we do not exactly need the Container component, even though it looks pretty lightweight and flexible