CODEWITHSUNDEEP
reactjsmaterial-ui
lucaplaysthenoob
lucaplaysthenoob

Reputation: 149

Make Material UI Container Component responsive

I want the Container Component have a different maxWidth Prop depending on Theme Breakpoints. Is there anything built-in for this or how should I do that?

Upvotes: 2

Views: 721

Answers (1)

adir abargil
adir abargil

Reputation: 5745

u can use useTheme and useMediaQuery hooks to do it easily:

import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';

function CustomContainer(props){
    const theme = useTheme();
    const matches = useMediaQuery(theme.breakpoints.up('sm'));
    return <Container maxWidth={matches ? 'lg' : 'sm'} >
    {/* your components */} 
    </Container>

}

Upvotes: 3

Related Questions