MaterialUI 基於斷點顯示和隱藏容器的間距

Question

我想禁用xs 、 sm和md的裝訂線。 並在xl及以后啟用它們。

然而，這是行不通的。

    <Container maxWidth={"xl"} disableGutters={{ xs: true, xl: false }}>

我是不是做錯了什么——因為 API 提到 boolean 可以傳遞給disableGutters ？

Answer 1

正如@Mr.Polywhirl 所說，disableGutters只接受布爾值，您可以按如下方式解決它：

 function Layout({children}) { const theme = useTheme(); const lessThanXL = useMediaQuery(theme.breakpoints.down("xl")); return <Container maxWidth="xl" disableGutters={lessThanXL}>{children}</Container> }

Answer 2

disableGutters道具僅接受 boolean，因此您使用的 API 錯誤。

容器 API - 道具

姓名	類型	默認	描述
disableGutters	bool	false	如果為true ，則移除左右填充。

所以你的代碼必須看起來像這樣

<Container maxWidth={"xl"} disableGutters={false}>