reactjsmaterial-uiconditional-rendering

Mui conditional rendering of one component

I would like to set disableGutters for MUI Container when xs size.

So far I was only able to do it like so:

<Container disableGutters sx={{ display: { xs: 'block', md: 'none' } }}>
    ...lot of code
</Container>

<Container sx={{ display: { xs: 'none', md: 'block' } }}>
    ...lot of duplicit code
</Container>

But because there is a lot of duplicit code I don't feel good about this solution, so is there a better way?

Solution

  • The accepted answer is not fully correct.

    As the docs state:

    A media query string ready to be used with most styling solutions, which matches screen widths less than the screen size given by the breakpoint key (exclusive).

    exclusive, so to match xs you need to pass sm to down():

    const isXSmallScreen = useMediaQuery(useTheme().breakpoints.down("sm"))