使 Material UI Container Component 响应式

【问题标题】：Make Material UI Container Component responsive使 Material UI Container Component 响应式
【发布时间】：2020-09-22 11:16:57
【问题描述】：

我希望容器组件根据主题断点具有不同的 maxWidth Prop。有什么内置的或者我应该怎么做？

【问题讨论】：

如果您喜欢我的回答，可以将其标记为答案
是的，现在我也实现了，我会的

标签： reactjs material-ui

【解决方案1】：

你可以使用useTheme 和useMediaQuery 钩子轻松完成：

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>

}

【讨论】：