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 的值开始起作用。

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

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

提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

grommet reactjs reactjs