使材质UI容器组件响应

Question

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

Answer 1

u可以使用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>

}