Grommet 中不同断点的 edgeSize 问题

如何解决Grommet 中不同断点的 edgeSize 问题

我是 grommet 的新手，遇到了问题。 我正在尝试为 grommet v2.14.0 中的不同断点设置不同的 edgeSize 值

在这里你可以找到主题代码 ->

export const v3theme = {
  global: {
    edgeSize: {
      none: "0px",small: "23px",medium: "24px",large: "25px",xlarge: "26px"
    },breakpoints: {
      xsmall: {
        value: 478,edgeSize: {
          none: "0px",small: "1px",medium: "2px",large: "4px",xlarge: "5px"
        }
      },small: {
        value: 767,small: "6px",medium: "7px",large: "8px",xlarge: "9px"
        }
      },medium: {
        value: 991,edgeSize: {
          none: "10px",small: "11px",medium: "12px",large: "13px",xlarge: "14px"
        }
      },large: {
        value: 1440,small: "15px",medium: "16px",large: "17px",xlarge: "18px"
        }
      },xlarge: {
        edgeSize: {
          none: "0px",small: "19px",medium: "20px",large: "21px",xlarge: "22px"
        }
      }
    }
  }
};

还有一个基本的 Box 组件，其中包括 pad="large"

<grommetBox pad={{ horizontal: "large" }}>test</grommetBox>

断点运行良好。但填充不是。

预期行为 在 xsmall 断点处，padding-left/right 必须为 4px 在小断点处，padding-left/right 必须为 8px 在中断点处，padding-left/right 必须为 13px 在 largebreakpoint 处，padding-left/right 必须为 17px 在 xlarge 断点处，padding-left/right 必须为 21px

实际行为 只有小断点的 edgeSize 才能正常工作。 here is the screenshot

在其他断点大小上，代码调用默认 global.edgeSize.large 值，在本例中为 25px。 here is the screenshot

而且，我还从 ShimiSun 找到了一个 SandBox 示例并在上面测试了我的代码，问题仍然存在。 https://codesandbox.io/s/grommet-ts-textinput-type-forked-bcrle

大概是与responsiveBreakpoint道具有关。当我把它改成responsiveBreakpoint:"xsmall"

然后，xsmall 的值开始起作用。

简而言之，我想将所有断点定义为响应式。

你知道我做错了什么，还是一种常见的行为？

提前致谢。

解决方法

我觉得你很准

可以推测，它与 responsiveBreakpoint 道具有关。当我把它改成responsiveBreakpoint:"small"

由于您要定义在 grommet 的基本主题（“xsmall”等）中不存在的新断点，因此您需要重新定义 responsiveBreakpoint，以便 grommet 知道实际断点以触发布局更改（边框、方向、间隙、边距、填充和圆角）。

如果这对您有用，那么这应该是您的答案。

话虽如此，请注意，向您的应用程序添加更多断点会导致布局处理更加复杂，因此如果没有必要，请避免这样做。