CODEWITHSUNDEEP
reactjsmaterial-ui
user249356
user249356

Reputation: 71

Material UI - how to remove padding from Container when width becomes xs

I want the Container to have no padding when Container becomes xs.

I tried the following: https://material-ui.com/api/container/, but I can't get it working. If I add root instead of maxWidthXs in StyledContainer then padding becomes 0 for all sizes, but I only want padding to be 0 if Container size is xs.

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";

import Container from "@material-ui/core/Container";
const StyledContainer = withStyles({
    maxWidthXs: {
        paddingRight: "0",
        paddingLeft: "0",
        paddingTop: "0",
        paddingBottom: "0",
    },
    root: {},
})(Container);

export default function SimplePaper(props) {
    // const classes = useStyles();

    return (
        <StyledContainer maxWidth="xl" xs={12}>
            <Paper
                style={{
                    alignItems: "center",
                    display: "flex",
                    justifyContent: "center",
                    padding: "10px",
                }}
                elevation={10}
            >
                {props.children}
            </Paper>
        </StyledContainer>
    );
}

Upvotes: 7

Views: 12744

Answers (4)

Blaise
Blaise

Reputation: 1

I am using MUI v5 and applying disableGutters to my Container components was not removing the padding.

In my case, it was due to container style overrides taking priority over other props that modify styles. To resolve it, I had to account for a case when disableGutters is passed as a prop and I did it as follows:

// theme.ts

const theme = createTheme({
...
components: {
  MuiContainer: {
    styleOverrides: {
       root: (ownerState) => ({
          // Set custom padding if disableGutters was not added as a prop
          padding: (!ownerState.disableGutters && '2px') || undefined
        })
      }
    }
  }
  ...
})

Now in your case, you can go to your Container component and do:

// [YourComponent].tsx
...
const matchesXs = useMediaQuery(theme.breakpoints.only('xs'));

<Container disableGutters={matchesXs} />

You might also want to check out this related issue: https://github.com/mui/material-ui/issues/30825

Upvotes: 0

atazmin
atazmin

Reputation: 5707

This helped me MUI v5:

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

...

 const theme = useTheme();

..

<Container disableGutters={useMediaQuery(theme.breakpoints.only('xs'))}>

https://mui.com/components/use-media-query/#using-muis-breakpoint-helpers https://mui.com/customization/breakpoints/#theme-breakpoints-only-key-media-query

Upvotes: 2

ewulff
ewulff

Reputation: 2269

MUI containers have disableGutters, which does exactly what you need without the need of restyling the entire component. You could go, for example, with something like:

<Container disableGutters={props.breakpoint === 'xs'}>

More info here: https://mui.com/api/container/#props

Upvotes: 10

Robert Reppel
Robert Reppel

Reputation: 21

Breakpoints would be one way to do it:

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Container from "@material-ui/core/Container";

const StyledContainer = withStyles((props) => {
    return ({
        root: {
            paddingRight: "10px",
            paddingLeft: "10px",
            backgroundColor: "green",
            [props.breakpoints.only('xs')]: {
                paddingRight: "0",
                paddingLeft: "0",
            },
        },
    })
})(Container);

export default function SimplePaper(props) {
    // const { classes } = props;

    return (
        <StyledContainer maxWidth="xl" xs={12}>
            <Paper
                style={{
                    alignItems: "center",
                    display: "flex",
                    justifyContent: "center",
                    padding: "10px",
                }}
                elevation={10}
            >
                {props.children}
            </Paper>
        </StyledContainer>
    );
}

Upvotes: 0

Related Questions