MUI5 sx道具中的填充断点

Question

我正在重构一些组件以使用最新的MUI版本。

因此，我经常将旧类“转换”到sx道具中，我发现自己喜欢这种更具可读性的新样式设计方法。

不过，有一件事让我感到心痛，我无法在利用sx映射的同时，找到如何处理theme.spacing()道具中的断点。

我有一个基本类，它用一些填充来设计div：

// old class
titleContainer: {
    display: "flex",
    alignItems: "center",
    [breakpoints.up("lg")]: { padding: spacing(3, 5, 2) },
    [breakpoints.down("lg")]: { padding: spacing(2, 2, 1) },
    [breakpoints.down("sm")]: { padding: spacing(2, 1, 1) },
  },

现在我有了这个Box：

<Box
  display="flex"
  alignItems="center"
  sx={{
    padding: {
      xs: theme.spacing(2, 1, 1),
      md: theme.spacing(2, 2, 1),
      lg: theme.spacing(3, 5, 2),
      },
  }}
>

这很好，但是对于最新的MUI更新，我们通常不需要再使用theme.spacing()了，这个数组表示法也能工作：

sx={{ p: 2 }}或sx={{ p: [2,1] }}

但是对于我没有得到的断点，同样的表示法是不被识别的，这迫使我要么使用strings (和计算的px值)，要么使用theme.spacing()。

这并不重要，但我想了解为什么和如何改进这一点。

干杯!

编辑

我刚刚意识到，拥有p: [2, 1]并不像我最初所想的那样转化为padding: 16px 8px;。数组是断点的速记：p: [2, 1] == p: {xs: 2, sm: 1}

虽然这会让事情变得更清楚一些，但我仍然不确定用什么“最干净”的方法来定义一个更复杂的填充断点。据我所知，会有这样的情况：

sx:{{
  pt: [2,1],
  px: 2,
  pb: [2,3],
}}

Answer 1

您需要在css属性中添加断点。对于不同的填充，您需要使用适当的css属性，如p, pl, pr, pt, pb, px, py，对于sx道具中所有受支持的css属性，请检查https://mui.com/system/properties/。

sx={{ 
  p: { xs: 2, md: 4, lg: 6 }, // for all sides
  px: { xs: 2, md: 4, lg: 6 }, // for left and right side
}}