我用 容器 并且它需要为移动设备和桌面设备提供不同的大小。
我怎样才能拥有 容器 maxWidth
不同尺寸基于 断点 像这样:
<Container maxWidth={{xs:"lg", lg:"md"}}>
而不是使用 useStyle
并添加一个 className
.
最佳答案
您可以使用 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>
关于reactjs - 在 Material-UI 容器中使用断点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69538083/