问题标签 [grommet]

我正在编写一个使用 Cypress 测试的 React 应用程序。在我的集成测试中，我编写了一个带有字符串数组的 cypress 命令，以便在多值选择框中选择项目。

我使用的代码大致如下：

我已经尝试过各种迭代，包括cy.wrap和.each. 无论我做什么，当数组包含多个项目时，它会单击一个项目，该项目被标记为已成功选择，然后它单击另一个项目，将其标记为已选，但第一个项目失去其选择状态。就好像组件的内部状态从未真正得到初始更改。

我已经确认这不是我的应用程序中的错误；手动测试时，多选工作正常。但赛普拉斯只是不想知道。任何帮助将非常感激。

我在页眉和页脚选项卡中使用 Grommet 创建了一个动态编辑器组件。当在 safari 中查看该站点时，当我更改字体大小等数据时，每个编辑器都会更改其位置。这只是 safari 中的问题：它在 Macintosh、windows 和 Linux 上的 Chrome 和 Firefox 中正常工作。它也不会出现在 safari Big Sur 中，但会出现在以前版本的 mac 中，例如 Catalina 和 High Sierra。

这是我的代码和组件的屏幕截图：

我正在为我的 react-native 应用程序创建一个 Web 应用程序。我对 react-native 的样式感到很自在，并尝试在 web 上使用 flexbox 也希望它能让我使用我的 react-native 知识。但是这些样式在网络上的表现略有不同，我很难找到一个很好的资源来解释基础知识。我正确理解了每个 flexbox 的含义，但我的理解存在差距，因此我无法实现所需的布局。

请参考以下代码片段。代码段下方的代码沙箱链接。

https://codesandbox.io/s/alarm-web1-yztws?file=/src/styles.css

我正在尝试实现以下类似于 Whatsapp Web 布局的布局。

这就是我目前得到的：

我想为主窗口分配一个最大宽度，但这似乎没有生效。我希望左侧的侧边栏覆盖窗口的整个高度，我尝试使用不同的 CSS 属性，例如height: '100%'or fill: vertical，flex: 1但这也没有任何效果。

同样，我希望详细信息面板采用完整的高度。我希望两个标题的高度与我指定的高度相同，height: 80px但这似乎也没有任何效果。这些东西在移动设备上很容易工作，但由于某种原因，网络工作不一样。

我找到了 flexboxfroggy.com 并完成了所有级别，但正如我所提到的，我了解 flexbox 属性，但网络需要更多的东西，而不仅仅是 flexbox 属性才能获得正确的布局。

我正在使用grommet和styled-components。我有几个地方使用由提供的组件grommet并设置一些类似的道具。我想styled-components使用导出的组件创建一个，grommet并使用styled-components.

这可以使用styled-components吗？下面是我正在尝试使用的。

和未设置在background上。我只看到示例中设置了实际的 CSS 道具。所以，我想问一下上述是否可行？heightpadAppHeader

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

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

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

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

预期行为 在 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 的值开始起作用。

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

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

提前致谢。

刚开始使用 Grommet。我一定遗漏了一些明显的东西，因为我觉得我正在尝试做一些相当简单的事情。我创建了一个自定义主题，我正在尝试添加一个悬停状态来更改Button. 默认的悬停行为保持不变，背景颜色不会改变。

这是我的代码的缩写示例：

我错过了什么？谢谢！

更新：

按照@Bas的建议使用该extend属性确实有效。我仍然很好奇为什么提供的不会完成同样的事情？hover

更新 2：

截至 21 年 2 月，根据这个 Github 问题，为了button.hover.primary按预期使用该属性，您必须首先定义button.hover.default. 定义default值后，primary和/或secondary按钮值似乎按预期工作。

我正在grommet为我的网络应用程序使用库。我想知道如何避免在 FormFields 和其他控件（例如 Accordions）下方显示边框。

我创建了一个沙箱来演示问题并允许测试任何建议。

https://codesandbox.io/s/grommet-accordion-issue-v7u5y?file=/index.js

我已将 Accordion 主题值设置为隐藏边框，但我仍然看到并且我在 FormField 上看不到这样的设置。

我想Layer在一个有black背景的地方展示一个。所以，我使用下面的主题设置：

现在我想添加显示另一个Layer背景在哪里transparent。我怎样才能做到这一点？我看不到将theme对象传递给组件以单独更改组件的某些主题参数的方法。

问题不限于Layer。同样的事情可能适用于可以使用某些主题设置自定义的任何其他组件，但是我如何为组件单独指定此类设置。

我想将 Grommet 导出TextArea为图像。如果只有一行文本，则以下代码有效。但是，如果我调整TextArea组件以使文本填充多行，则不会在输出图像中导出。

这是它的外观（1 - 是包含TextArea我要导出的多行的页面，2 - 导出TextArea的，仅包含一行文本）

好像我只是错过了一些关于 HTML 画布的东西。或者，也许 GrommetTextArea中有一些属性有助于改变这种行为？

应用程序.js：

index.js：

索引.html：

我正在MaskedInput为我的网络应用程序创建一个时间选择器。我使用了grommet网站上的示例，但无法使其正常工作。例如，在网站上显示的小部件上

https://v2.grommet.io/maskedinput

我可以点击小时来更改小时，但我不能点击分钟来更改分钟。要显示分钟，我需要先点击外面以放松焦点，然后点击分钟才能看到分钟。同样的事情也适用于上午/下午的选择。除非我失去焦点，否则我看不到它，然后点击上午/下午设置，然后更改它。

如何配置以便用户在单击被屏蔽输入中的任何输入时可以看到输入值，即使该字段已经聚焦？

此沙箱还显示grommet网站https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/maskedinput&module=%2Fsrc%2FMaskedInput.js上存在的相同问题

当在 MaskedInput 上设置一个值时会出现问题，这很可能是时间选择器的情况。请参阅显示问题的附加视频。当我点击分钟时，会显示分钟下拉菜单，但之后当我点击小时或上午/下午时，不会显示其他下拉菜单。