问题标签 [chakra-ui]

上下文：我有一个带有Chakra UI的Next.js站点。我有一些用户提供的降价内容，这些内容是在运行时从外部源（例如，GitHub用于存储库）获取的。README.md

现在，默认情况下，react-markdown（基于remarkjs）使用 HTML<img>标记来标记图像（![]()）。我想在用户提供的 markdown中使用Next.js 10 中发布的新组件。<Image />此外，我还想用相应的 Chakra UI 组件替换其他标签。

我该怎么做呢？

解决方案

然后在所需的页面中：

其他元素也一样...

我正在尝试编写一个测试来测试电子邮件输入验证，当电子邮件有效时，EmailValidation 应该有，当电子邮件无效时<flex display= 'flex'><flex display= 'none'>，EmailValidation 应该有。

问题是：我的第一个测试可以通过，但我不确定第二个单元测试总是让我失败的原因如下：

这是我在 signup.js 中的代码的一部分：

这是我在 Validation.js 中的代码的一部分：

这是我的测试代码：

感谢您的帮助，我整天都被这个问题困扰着！

我正在使用带有 Chakra UI 的 Gatsby，并且在本地存储或如何访问 ColorMode 方面存在问题。

这是我的仓库：https ://github.com/RyanPinPB/pdm-gatsby

现场直播：https ://pearsondigitalmarketing.com

ColorMode 和组件在 localhost 上的样式正确，但在生产中，站点在本地存储保存 darkMode=true 后呈现标题时会出现问题。

您可以通过访问实时站点、切换暗模式和刷新来重现此问题。或者，如果您的浏览器具有主题设置或取决于您的操作系统（或一天中的时间），它将在晚上显示问题，或者您的浏览器/操作系统更喜欢暗模式。

奇怪的是，某些组件接收到正确的 darkMode 样式（颜色和背景），但我的徽标、菜单和标题背景不正确。即使所有这 3 个都使用 colorMode 样式条件，如下所示：

我在索引和头文件中添加了一个控制台日志，以查看其中一个是否在从本地存储触发/调用 colorMode 之前呈现，但两个控制台日志都打印正确的 colorMode 状态。我很难弄清楚为什么我在暗模式下的标题有错误的背景颜色和颜色样式。

单击标题中的“切换按钮”后，该问题是正确的。如果页面认为它需要处于 DarkMode，它只是在页面的初始呈现上。

任何帮助是极大的赞赏。

ThemeContext.js：

也许有人面临类似的问题。我有一个使用 webpack 构建的项目。（ webpack 版本是 4.43.0 ）。它工作得很好，但最近我添加了新的依赖项，现在当我尝试构建我的项目时，它向我展示了ERROR: "export 'dequal' was not found in 'dequal'. 最让我困惑的要点是它依赖于依赖。更具体地说，我添加了@chakra-ui包，它具有dequal包作为依赖项。

错误输出截图

我检查了 node_modules 文件夹，我可以在其中找到 dequal。

在 @chakra-ui 中导入 dequal 的地方，它被导入为命名导入：

dequal 包本身作为命名导出导出：

所以一切都应该没问题，但不知何故 webpack 和 babel-loader 找不到它。此外，如果我将 dequal 包中的命名导出更改为默认导出并更改为 charka-ui 中的默认导入，那么一切都构建得很好。那么我可能在 webpack 配置中遗漏了什么，或者它是 webpack/babel-loader 本身的错误？请指教，谢谢！

Webpack：4.43.0 babel-loader：8.1.0 @chakra-ui/core：1.0.0-rc.8

我在 Gatbsy 工作，当我尝试使用文件夹theme.js中的阴影文件覆盖核心 Chakra 主题时，gatsby-plugin-chakra-ui它没有任何效果。

请问有什么想法吗？我在用

编辑：修改主题适用于 Button 组件，但不适用于 Input

我在 chakra_ui 中扩展了主题提供程序

我使用了按钮组件，并将 colorScheme 属性设置为我的主题具有的值：

它在 css 中生成了以下内容：background: brand.50.500;. 所以它不应用颜色，有什么问题吗？

我注意到一些东西，没有.number：例如 0.50 或 0.100... 品牌不起作用，但其他内置颜色起作用。

https://codesandbox.io/s/infallible-allen-1k0tx?file=/src/App.js:257-333

我有一个表单，我正在使用 Formik 验证表单，我想在有输入时将数量输入和单位成本输入的值相乘，然后自动将其显示在总输入中。我正在使用 Formik + Chakra_UI。

我正在尝试学习 react/typescript，并且我正在逐行遵循教程，但是在尝试安装 @chakra-ui/react 或 @chakra-ui/core 时不知何故出现此错误。似乎反应已更新的依赖问题。我应该回滚反应吗？

在普通页面和模态页面上有一些表单字段，我希望模态按钮触发提交事件。每当我在模态按钮上使用提交类型=“提交”时，我都没有得到回应。但是，如果我在“普通”页面按钮中使用它，它就可以工作。请问这是怎么回事，我不能在模态中使用它吗？

我正在使用 Chakra UI，我需要使用 css 伪元素自定义滚动条样式::-webkit-scrollbar，但是 Chakra UI 没有看到这个伪元素，而且我不知道在哪里可以设置这个特定组件的样式而不创建一个全局 CSS 类。

这是我的代码示例：