在 Material-UI 容器中使用断点

Question

我使用容器，移动设备和桌面设备的大小需要不同。

如何根据断点使容器 具有不同的大小，如下所示：maxWidth

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

而不是使用useStyle并添加className.

Answer 1

您可以通过使用支持响应值的sxprop来做到这一点。可以在对象中访问断点值。请参阅此处的默认主题以了解更多信息。theme.breakpoints.values

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>