问题标签 [chakra-ui]

试图将 ChakraUI 应用于我的 gatsby 项目。

我已经安装了所有必要的软件包

“@chakra-ui/gatsby-plugin”：“^1.0.1”

"@chakra-ui/react": "^1.1.3"

“@emotion/react”：“^11.1.4”

“@emotion/styled”：“^11.0.0”

“成帧运动”：“^3.2.0”

然后将插件添加到gatsby-config.js

但是在我运行`yarn develop 之后，输出是：

你有什么想法吗？我什至不使用自定义 html.js。

我正在使用脉轮 ui。
我想将按钮颜色更改为#2477b3。我可以通过传递props中的值来改变它，但是每次传递props中的值都需要花费很多时间和精力，所以我想改变默认的Button颜色等。
我想使用的样式A 按钮。
我更改了theme.ts并创建了一个BButton，但样式没有改变。我尝试更改 theme.ts 中的值，但颜色没有改变。

主题.ts

如何在安装 chakra-ui 和 react 应用程序时解决这些错误？

如何解决？

chakraUI 提供了一个自定义挂钩 useDisclosure() ，它返回isOpen、onClose、onOpen。

onOpen被传递给被触发以打开模式的按钮的 onClick 。

现在我想在同一页面上制作另一个模式（比如说reportModal）。为此，我编写了相同的代码，在解构 useDisclosure() 时重命名了变量。

此外，我通过将这些重命名的变量传递给组件来使用相同的流程，但 id 不起作用。

任何人的解决方案？提前感谢...

第一次使用 Chakra 并尝试在 Chakra UI 中将默认字体更改为 Times New Roman 但没有效果。是否导入，分配新主题，将其作为道具传递给 ChakraProvider 但代码中没有任何反应

index.js

我的文本组件似乎没有改变

我正在使用 chakra ui，我想在单个组件中使用两个模态。

isOpen 、 onOpen 、 onClose 不能作为变量更改，因为它们是内置的脉轮函数。有人可以建议我一种方法来改变其中两种模式（Chakra UI）操作吗？

我正在使用一个React 组件，该组件根据是否支持 CSSbackdrop-filter指令使用不同的不透明度值：

问题是该站点是使用 Next.js 在服务器端生成的。CSS.supports('backdrop-filter', 'blur(1px)')在服务器上返回false，因此该值始终false与客户端属性无关。

一种解决方案是使用 CSS，例如：

这应该由客户端解释并避免服务器端呈现问题，但我没有发现有关如何将这种样式集成到它所构建的 Chakra-UI 中的迹象。

我有一个 Chakra UI 模式，它打开一个按钮的 onClick。我希望能够提取用户在关闭模态时放入输入/单选按钮的值。Modal 类和 Modal/Button 渲染如下所示。由于输入和单选按钮是在 Modal 类中定义的，是否可以获得它们的最终值onClose？

模态的.tsx

使成为

我知道关于这个问题有很多答案，但我似乎没有让它发挥作用。

所以我的地图框上有一个标记，我有一个状态变量“工具提示”。如果鼠标悬停在标记上并将其设置为真，当它离开时将其设置为假。

如果我用 console.log 替换“setTooltip(true)}”它可以完美地工作，所以我不知道为什么状态没有改变。

如果它是 true ()，我想显示一个框，如果它是 false ()，则显示另一个框。

我究竟做错了什么？

我正在尝试提交带有下拉列表的表单。问题是 formik 无法识别选项的价值，不知道为什么或如何解决它。

虽然提交后的成分 ID 仍然为空，但有什么想法吗？