Grommet中不同断点的edgeSize问题

Question

我是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,
        edgeSize: {
          none: "0px",
          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,
        edgeSize: {
          none: "0px",
          small: "15px",
          medium: "16px",
          large: "17px",
          xlarge: "18px"
        }
      },
      xlarge: {
        edgeSize: {
          none: "0px",
          small: "19px",
          medium: "20px",
          large: "21px",
          xlarge: "22px"
        }
      }
    }
  }
};

和一个基本的Box组件，其中包括pad=“大型”

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

断点运行良好。但拍子不是。

预期行为在xsmall断点，填充-左/右必须在小断点为4px，填充-左/右必须在中间断点为8 8px，填充-左/右必须在大断点处为13 8px，填充-左/右必须在xlarge断点处为17 8px，填充-左/右必须为21 8px。

实际行为只有小断点的edgeSize正常工作。这是截图

在其他断点大小上，代码调用默认的global.edgeSize.large值，在本例中为25 On。这是截图

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

很可能与responsiveBreakpoint道具有关。当我将它改为responsiveBreakpoint时：“xsmall”

然后，xsmall的价值开始发挥作用。

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

你知不知道我做错了什么，或者这是一种常见的行为？

提前谢谢。

Answer 1

我觉得你很在行

很可能与responsiveBreakpoint道具有关。当我将它改为responsiveBreakpoint时：“小”

由于您正在定义grommet的基本主题("xsmall“等)上不存在的新断点，所以您需要重新定义responsiveBreakpoint，这样grommet将知道实际的断点，从而触发布局上的更改(边界、方向、间隙、边距、衬垫和圆形)。

如果这似乎对你有用，那就应该是你的答案。

尽管如此，请注意，在应用程序中添加更多的断点将使布局处理更加复杂，因此如果没有必要，请避免使用。