Material UI 根据断点显示和隐藏 Container 的排水沟

Posted 2023-03-15

【中文标题】Material UI 根据断点显示和隐藏 Container 的排水沟

【英文标题】：MaterialUI show and hide the Container's gutters based on breakpoints

【发布时间】：2021-12-30 11:14:24

【问题描述】：

我想禁用 xs、sm 和 md 的装订线。并在xl 及以后启用它们。

但是这不起作用。

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

我是不是做错了什么——因为 API 提到可以将布尔值传递给 disableGutters？

【问题讨论】：

您可以编写一个自定义钩子，根据当前断点返回正确的道具。 this 答案中的更多详细信息。

【参考方案1】：

disableGutters 属性仅接受布尔值，因此您使用的 API 错误。

Container API - Props

Name	Type	Default	Description
disableGutters	bool	false	If true, the left and right padding is removed.

所以你的代码必须看起来像这样

<Container maxWidth="xl" disableGutters=false>

【讨论】：

对。所以我想要实现的是showxl 及以后的排水沟和hide 它们在小于xl 的断点处。这不是那样...

我不确定 API 是否可以处理该要求。我认为您应该利用 sx 道具和通过主题对象提供的断点来删除填充并实现您的目标