Material-ui: Missing disableGutters prop on Container

[TheHalcyonSavant]

v4 Container API is missing disableGutters. Padding left and right can't be disabled on Container through prop as with other components.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

<Container disableGutters> should remove padding-left and padding-right.

Current Behavior 😯

disableGutters prop is missing in Container

[oliviertassinari]

@TheHalcyonSavant I agree, this sounds like a good idea. Bootstrap comes with a default padding logic while tailwind makes you explicitly enable it. a disableGutters prop would be a great tradeoff. What do you think of this change?

diff --git a/packages/material-ui/src/Container/Container.js b/packages/material-ui/src/Container/Container.js
index 72b3878b1..5d272f72c 100644
--- a/packages/material-ui/src/Container/Container.js
+++ b/packages/material-ui/src/Container/Container.js
@@ -10,6 +10,8 @@ export const styles = theme => ({
     marginLeft: 'auto',
     boxSizing: 'border-box',
     marginRight: 'auto',
+  },
+  /* Styles applied to the inner `component` element if `disableGutters={false}`. */
+  gutters: {
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
@@ -63,6 +65,7 @@ const Container = React.forwardRef(function Container(props, ref) {
     classes,
     className,
     component: Component = 'div',
+    disableGutters = false,
     fixed = false,
     maxWidth = 'lg',
     ...other
@@ -74,6 +77,7 @@ const Container = React.forwardRef(function Container(props, ref) {
         classes.root,
         {
           [classes.fixed]: fixed,
+          [classes.gutters]: !disableGutters,
           [classes[`maxWidth${capitalize(String(maxWidth))}`]]: maxWidth !== false,
         },
         className,
@@ -100,6 +104,10 @@ Container.propTypes = {
    * Either a string to use a DOM element or a component.
    */
   component: PropTypes.elementType,
+  /**
+   * If `true`, the left and right padding is removed.
+   */
+  disableGutters: PropTypes.bool,
   /**
    * Set the max-width to match the min-width of the current breakpoint.
    * This is useful if you'd prefer to design for a fixed set of sizes

Do you want to submit a pull request? :)

[TheHalcyonSavant]

Thanks @oliviertassinari, you have already done the changes, so it's more appropriate for you to take the credit, I'm busy with other things anyway.

[alexsanchezdev]

If you are running short on time let me know @oliviertassinari and I would create it.

[oliviertassinari]

@alxsnchez You can go for it :). We use the "good first issue" to help people contribute to the project. The core team almost never work on those issues.

[mark-tate]

Hi @joshwooding

Is there anything to do here ?
There is an ageing PR
https://github.com/mui-org/material-ui/pull/15872

We will need this fix, so happy to help it progress, if I can .

[joshwooding]

Hi @slipmat

Whoops, looks like this issue is already taken.

Sorry about that!

[karansahenquero]

love to only remove gutter from right