如何根据屏幕宽度Material UI更改间距系统？

Question

我有一个这样的组件

<Box px={3}>
  <Content />
</Box>

其实这段代码在手机上渲染是没有问题的。但当我的应用程序在桌面或更大的屏幕上呈现时，paddingX 仍然保持等于 24px（我使用 8 基数 - 8*3=24）。

P/s：我尝试修改 theme.js 中的 theme.spacing 但似乎 Material UI 不允许我们根据断点自定义间距。

所以我的问题是，如何根据屏幕宽度更改间距系统？

Answer 1

您无法更改每个断点上的间距基值，但可以更改每个断点上的间距倍数：

<Box px={{xs:1, sm:2, md:3}}>
  <Content />
</Box>

支持 margin 和 padding 属性

自定义断点值可以通过实现来完成createMuiTheme：

https://material-ui.com/customization/breakpoints/#custom-breakpoints

import { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme(
   {breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1600,
    },
  })

Answer 2

您可以使用 mediaQuery 挂钩来帮助您获取宽度，即 lg、md、sm，并基于此您可以有条件地修改间距。

来源：带有示例的文档链接