reactjs - 在 Material-UI 容器中使用断点

Question

我用 容器 并且它需要为移动设备和桌面设备提供不同的大小。
我怎样才能拥有 容器 maxWidth不同尺寸基于 断点 像这样:

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

而不是使用 useStyle 并添加一个 className .

Answer 1

您可以使用 sx 来做到这一点。支撑responsive values的 Prop .断点值可以在 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>