问题标签 [chakra-ui]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 无法使用 Next JS 和 Chakra UI 在响应模式下正确设置导航栏
我一直在尝试使用 Next JS 和 Chakra UI 构建一个网站，我想让它具有响应性。所以我使用了 react-responsive 包来做到这一点。我最初的目标是制作一个响应式导航栏。工作如下：
在桌面模式下，这是我期望的输出：
从亮模式到暗模式的切换完美。对于移动模式，我想要一个汉堡包而不是导航栏，点击它有一个 Drawer Chakra UI 元素来显示所有导航栏内容。
虽然所有这些都已按预期实现，但似乎发生了一个小错误。每次在桌面模式下刷新页面时，我都会得到汉堡包图标而不是月亮图标。
这是我一直面临的问题的快速演示
我已经附上了这部分的相应代码
导入包和分配变量，我们关心的isBigScreen
然后我返回一个 NavContainer，它本质上是一个带有一些配置的 Flex。
这部分代码在左侧设置颜色切换器。这取自 react-responsive 自述文件中的示例代码
这是我认为导致问题的代码部分
这部分代码确保如果屏幕是桌面，则在同一行显示带有链接（主页、关于、项目、博客）的导航栏，如图 1 和 2 所示，如果这不是桌面模式，则显示一个汉堡图标。
这部分代码处理了抽屉从左侧滑动的移动模式时的情况。这也很完美。
如果需要进一步澄清，我很乐意提供帮助。提前致谢。
javascript - 使用 Formik Form 检测 Input Chakra UI 元素的“删除”键 onKeyPress
我有一个Input像里面的脉轮 UI 元素Formik Form：
我得到了字母键的打印输出，但是当我delete在 Google Chrome 版本 91.0.4472.114（官方版本）（x86_64）中按我的 macOS 10.15.7 上的键时无法打印输出
有人知道我做错了什么吗？
这是event我在键盘上按字母 R 时的打印输出
reactjs - Chakra UI 自定义单选按钮点击时没有任何反应
我正在尝试使用 chakra UI 自定义单选按钮创建单选按钮列表，我遵循了此处的文档
问题是当我单击单选按钮（自定义组件）时什么都没有发生，它应该更改背景颜色我唯一得到的是控制台中的点击次数，我不确定这部分代码来自文档应该做而不是控制台日志记录？
无线电包装器组件的代码：
和实际单选按钮的代码：
门票数据：
reactjs - 创建 React App 上的 Chakra UI 抛出 Hook 错误
我正在进入 React 和 Chakra。我有一个用“create-react-app”创建的小 React 应用程序，经过一点改进后，我愿意添加一些 Chakra UI 来添加一些样式。我按照官方文档进行设置，但是当我在我的 index.js 文件上设置“ChakraProvider”组件时，我会收到 Hook 错误，如果我删除这些组件，应用程序就可以正常工作。但据我所知，这些组件放置得很好。
这是我的 package.Json：
javascript - 在 chakra-ui 上为 Modal 创建变体样式
我想创建一个 Modal 变体并设置默认宽度和背景颜色（除其他外）。我找不到确切说明如何操作的文档，但我认为使用variants将是要走的路。
我在代码沙箱上做了最好的尝试：https ://codesandbox.io/s/vigilant-germain-u3mkx ？
欢迎大家提出意见。
reactjs - Chakra UI Image 组件无法识别图像路径
我目前正在学习如何使用 ChakraUI
当尝试使用
import { Box, Heading, Text, Image } from "@chakra-ui/react";它们根本不显示加载本地图像时，只是 alt 文本，好像它们的路径没有正确输入，我还尝试将图像源直接输入到组件中。
该nextjs/image组件在完全相同的src路径下正常工作，我没有关于此特定错误的任何信息，我也尝试了该@chakra-ui/image组件，并且 import { Img } from "@chakra-ui/react";我也在使用Nextjs工作，这些脉轮选项都没有为我工作。
在 ChakraUI 文档中，它从未使用本地路径作为示例，但我认为这不是问题
reactjs - 我想改变脉轮ui抽屉的大小
我正在使用 chakra ui，我想将抽屉组件的宽度设置为370px. 我想将抽屉组件的宽度设置为370px. 如果我通过sm或lg作为大小，它会将大小更改为默认设置，但我无法将其更改为我想要的大小。
css - 使用 Chakra-UI 抽屉组件推送内容
我正在学习如何使用 Chakra-UI 抽屉组件： https ://chakra-ui.com/docs/overlay/drawer 。它基本上做了我想做的一切，除了一个例外——它覆盖了内容，而不是把它推到一边。我想要的是一个右侧抽屉，当它打开时会将内容推到左侧。
Chakra-UI Drawer 组件可以做到这一点吗？如果是这样，我该怎么做？
谢谢。
reactjs - Chakra UI 不适用于 react-split-pane
我正在使用chakra-ui，以及react-split-pane。
如果我使用其中一种，它会很好用。如果我一起使用它们，页面是空白的，没有控制台错误消息。这里举三个例子。
一起使用它们：
CodeSandbox：https ://codesandbox.io/s/patient-worker-x65r5?file=/src/index.js
仅使用react-split-pane：
仅使用chakra-ui：
关于这里可能发生什么的任何想法？
我正在使用带有 webpack 的 React+Typescript。