在 Material-UI Container 中使用断点

【问题标题】：Use breakpoints in Material-UI Container在 Material-UI Container 中使用断点
【发布时间】：2021-11-30 21:43:51
【问题描述】：

我使用 Container，它需要为移动设备和桌面设备设置不同的尺寸。

我怎样才能让 Container maxWidth 像这样基于 Breakpoints 的大小不同：

<Container maxWidth={{xs:"lg", lg:"md"}}>

而不是使用 useStyle 并添加 className。

【问题讨论】：

你可以试试useMediaQuerymui.com/components/use-media-query

标签： reactjs material-ui

【解决方案1】：

您可以通过使用支持responsive values 的sx 属性来做到这一点。断点值可以在theme.breakpoints.values 对象中访问。请参阅此处的default theme 了解更多信息。

const theme = useTheme();

<Container
  sx={{
    bgcolor: "wheat",
    maxWidth: {
      lg: theme.breakpoints.values["md"],
      md: 80,
      xs: 20
    }
  }}
>
  <Box sx={{ bgcolor: "#cfe8fc", height: "100vh", width: "100%" }} />
</Container>

【讨论】：