1

我是 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="large"

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

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

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

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

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

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

可能，它与 responsiveBreakpoint 道具有关。当我将其更改为 responsiveBreakpoint:"xsmall"

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

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

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

提前致谢。

4

1 回答 1

0

我认为你是正确的

想必和responsiveBreakpointprop有关。当我将其更改为 responsiveBreakpoint:"small"

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

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

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

于 2021-01-09T20:21:28.503 回答