问题标签 [grommet]

我正在使用grommetReact 项目并想知道如何在几个<Heading />组件中大写文本。

我是 React 和 Grommet 的新手，并且已经完成了入门教程。当我将谷歌地图添加到主容器时，它会呈现并填满整个屏幕。但是，当我单击通知图标以加载侧边栏时，它只会呈现在侧面的一小列中。有没有办法让我编辑样式以自动调整宽度，或者我是否需要将容器宽度作为单击按钮时更改的属性？（请原谅任何问题格式错误，因为这是我的第一篇文章。）

我尝试过浏览 Grommet 盒子道具和各种 CSS 样式设置，但没有成功。

应用程序.js：

MapContainer.js：

我希望地图在侧边栏加载时缩小以填充容器/容器以缩小。

我正在尝试使用 grommet v2 创建应用程序主题。我正在使用来自索环组件的 Form 和 FormField 来装箱。当 FormField 处于活动状态时，底部边框将颜色更改为默认值accent-1，我无法更改此边框颜色。

我有 theme.js 文件，我将其放入组件中的主题属性。与主题相关的所有内容都运行良好（按钮颜色等）。我试图更改强调 1 的颜色，但缺乏关于此的文档。

在主题.js

我希望将此颜色更改为灰色，但它仍然是默认颜色

所以我尝试在我的 gatsby 网站上覆盖大约一秒钟，让它在后面加载正确的断点。我怎样才能做到这一点？

所以我设置了一个 Interval 和一些 State 来加载 Overlay 并让它在一段时间后消失。但是每个页面重新加载覆盖后的问题再次出现。我没有像 redux 这样的状态管理，我需要 Overlay 只在每次刷新或从外部链接进入后出现，而不是点击内部链接。

我试过useEffect只在挂载上渲染，但这并不能解决问题，因为内部链接更改会触发重新挂载

我发现我可以使用浏览器 API onInitialClientRender。但我不明白如何在 gatsby-browser.js 之外访问其中生成的值。一般来说，我在理解如何使用这些 API 时遇到问题。

customHooks.js

布局.js

因此，预期的结果将是一种告诉初始客户端渲染设置状态的方法，该状态告诉要渲染叠加层，并且在此渲染之后状态应该更改以禁用叠加层的渲染。

通常跨度不应该得到任何边距顶部，那么给出了什么？另外，由于某种原因，如果我将 Text 实例放在表单元素中，那么它不再像通常那样获得 margin-top 吗？

https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=text&module=%2Fsrc%2FText.js

我听说“带有 reactjs 的垫圈”有很好的用户界面。所以我想在我的环境中尝试“索环”。但我不明白如何使用“索环”。因为我希望这个模块只能在普通的互联网浏览器上工作。但有时一些网站解释了“使用 node.js”作为索环。这是服务器端模块吗？不能只使用“索环”互联网浏览器吗？

https://v2.grommet.io/

我已经阅读了组件的页面，但我无法理解。 https://v2.grommet.io/components

我正在前端创建一个表单，其中我使用 texInput、单选按钮、选择组件。所有的 texInput，单选按钮组件都是按照分配的一个大小，但是选择组件的大小非常小，请帮我解决与每个 textinput 组件大小相同的选择组件

在此处输入图像描述

块引用

我有这个问题： 我希望日历图标渲染得更小一点，在三个边框内并且与三个边框等距。 我可以通过使用 CSS 减少图标的填充和大小来实现它。 问题是我不知道如何定位它。

input

这是@atanasster 为HP 的 UI 框架Grommet 2设计的DateInput控件。 看起来像这样是因为我改变了它的大小，我的版本比原来的要浅。

因为这些是styled-components我认为可能有一种方法来设置它们的样式，但我不知道如何定位组件的子组件，即它的内部 HTML 节点。

数小时反复阅读文档并没有帮助。
我非常感谢一些关于造型的智慧，或者确认我想做的事情是不可能的。

该示例可以在这里看到：https ://stackblitz.com/edit/dateinputstyled

我的页面中添加了两个全局样式条目，我无法控制它们。

您能帮我了解哪些组件正在注入它们吗？

使用 gatsby 开发的应用程序：Grommet Styled components

代码包含在标题部分

我想知道，我该如何调试这个问题？让我们说哪个组件负责添加这两行。