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

【问题标题】：MaterialUI show and hide the Container's gutters based on breakpointsMaterial UI 根据断点显示和隐藏 Container 的排水沟
【发布时间】：2021-12-30 11:14:24
【问题描述】：

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

但是这不起作用。

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

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

【问题讨论】：

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

标签： javascript reactjs material-ui emotion

【解决方案1】：

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

Container API - Props

Name Type Default Description

disableGutters bool false If true, the left and right padding is removed.

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 道具和通过主题对象提供的断点来删除填充并实现您的目标