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

Question

我有这样的组件

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

实际上，当这段代码在移动端渲染时，是没有问题的。但是当我的应用程序在桌面或更大的屏幕上呈现时，paddingX 仍然保持等于 24px(我使用 8 base - 8*3=24)。

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

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

Answer 1

您不能更改每个断点上的间距基值，但可以更改每个断点上的间距乘数:

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

同时支持边距和填充 Prop
自定义断点值可以通过实现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,
    },
  })