问题标签 [grommet]

当我尝试使用命令提示符在 Windows 7 中安装 Grommet 时，它给出的错误为“找不到模块”。我一直在按照本教程设置环境... http://www.grommet.io/docs/hpe/develop/get-started .....当我运行 gulp dev 时，它给出的错误为“找不到模块”..我什至尝试了 npm uninstall 然后 npm install 但它也不起作用。 “节点版本”：“4.4.0”，“npm 版本”：“2.14.20”。 另外，我不在代理后面。

我将react-select与Grommet结合使用，并在 Grommet FormField 组件中进行选择，如下所示：

在较小的屏幕上，它可以正常工作：

但在较大的屏幕上，选择内容可以在父 (FormField) 容器内滚动：

如果我切换position: absolute到关闭，则选择内容显示在容器外部，但会调整整个表单的大小：

关于还有什么要检查或尝试的想法？

我正在使用带有 webpack 的 grommet-ui 并做出反应。如何设置自己的颜色选项。

有没有办法使用我自己的自定义颜色/配色方案来代替预定义的颜色，如 colorIndex="neutral-1"。

我正在尝试在我的 React 项目中使用索环，并且我正在使用 webpack。我添加了 scss 加载程序，当我构建我的应用程序时，我收到以下错误：

不知道我做错了什么..

这是我的 webpack.config.js

I'm using Grommet. I've followed the getting started guide and made my first application. The webpack bundle generated for production is a single JavaScript file that exceeds 1.7 MB and I didn't add anything to the get started example.

Is there is a way to reduce this bundle file size or split it into more than one file?

我正在使用状态在图标的单击事件中打开和关闭图层。当我 _onOpenLayer()从点击处理程序调用时，没有任何反应。

以前我直接从图标 click 调用该方法onClick={this._onOpenLayer()}，这确实打开了图层，但如果由于不允许在 rednder() 中调用方法而冻结了 UI。

所以我找到了一个在调用 open 之前添加 lambda的解决方案，如下所示。但是单击该图标不会打开具有此更改的图层：

为了进一步调试，我在_onOpenLayer()方法中放置了一个 console.log ，我可以看到它没有在图标点击时被击中。

问题：

如何从 render 方法中的 click 事件中调用方法？

这是我正在渲染的课程的要点。_onOpenLayer() 将 openLayer 状态设置为 true，从而打开图层元素：

我在 Python 和 Flask 方面有超过 10 年的经验，主要关注后端和很少的 HTML + JavaScript，但是零 CSS。大约 6 周前，我开始使用 React 和 JavaScript，并使用不需要太多样式的 react 制作了简单的应用程序。但是，现在我需要使用索环进行样式设计，使用 React 做一个体面的项目。

我从 react-boilerplate 1开始。在阅读了 react-boilerplate scss 文档和 //github.com/grommet/grommet-standalone 自述文件后，我的理解是，我需要更改 webpack 配置以使 scss 加载程序正常工作。

我的环境是 win8.1 x64，节点 6.4.0

这是我改变的。

1. 都安装了sass-loader&node-sass

2. 在internals\webpack\webpack.dev.babel.js改变

至

注意额外的 !sass-loader 根据 //github.com/mxstbr/react-boilerplate/blob/master/docs/css/sass.md

3. 将以下内容添加到internals\webpack\webpack.base.babel.js

{ test: /\.scss$/, loader: 'style!css!sass?outputStyle=compressed' }

@ 第 40 行就在 css 块下方，并且

@line 62[ 第 58 行，如果你在 master 分支中查看 @github 源代码 //github.com/mxstbr/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js，+4 是因为为 scss 块添加了 4 行]

4. '.scss'在resolve.extenstions数组中添加的同一个文件中。

5. 现在，在这些更改之后，我运行 npm start 并将以下行添加到app\containers\App\index.jsNow 在这些更改之后，我运行 npm start 并将以下行添加到 app\containers\App\index.js

   import 'grommet/scss/vanilla/index';

根据此处的文档 //github.com/grommet/grommet-standalone

在 cmd.exe 控制台中，我收到以下错误

不用说已经安装了索环，并且文件存在于带有 scss 扩展的所需位置。我当然可以使用扩展名导入，因为import 'grommet/scss/vanilla/index.scss我收到以下错误

我在这里遗漏了一些非常明显的东西吗？看起来好像 scss 加载程序不工作。如果您已成功使用带有 react-boilerplate 的扣眼，请发布您所做的更改。

PS：Stack Overflow 告诉我，我不能发布两个以上的链接，所以我修改了链接以省略 https: 从 url，请手动添加。

我以前安装过 node，运行 node -v 时可以看到我的 mac 上有 v4.2.2 版本。我现在正在尝试更新到最新版本的节点以及安装 grommet.js

在终端输入时：

npm 安装 npm@latest -g

或者

npm install -g 索环-cli

我明白了

-bash：npm：找不到命令

我尝试通过以下链接中的步骤解决但没有成功： Upgrade NodeJS to the latest version on Mac os

我应该如何解决这个问题？

我正在使用 Grommet 并试图在按下按钮时让Layer（几乎是一个模态）工作。我知道我的 onClick 有效，因为我尝试了一个简单的 console.log 并且它有效。如果我使用 ReactDOM 并渲染它，MyModal 也可以显示。我认为我的问题与我如何调用它或返回它有关？我希望在单击按钮时显示模态。

MyModal.js

主.js

我有一个使用 grommet ux 框架的 React/redux 应用程序。基本结构是：

<GLNav />除非单击“设置”图标，否则我希望隐藏该组件，从而允许该<GLBoard />组件填满屏幕。我有一个连接到图标的 redux 状态变量来切换active道具并切换<GLNav />组件上的 CSS 类。CSS 将宽度设置为 0，以便 NAV 组件滑入和滑出：

所有这些都可以在 Chrome 中完美运行。但是在 Safari 中，当 SideSplit 组件处于非移动模式（屏幕宽度大于 750 像素）时 - 即使activeprop 为 false 并且.hide应用了 CSS 类 -<GLNav />组件也具有宽度值。如果我将宽度更改为小于 750 像素，扣眼会应用一个hidden类，这将<GLNav />根据需要隐藏。

这是<GLNav />课程：