问题标签 [chakra-ui]

我在 React with Typescript 中使用 Chakra UI，遇到了一个奇怪的问题，我试图在 modal.tsx 文件中使用以下代码实现 Modal。

一旦我点击打开模态按钮，它只会显示没有模态实际内容的覆盖。

中间项目不能居中

代码

问题

我如何将<Box>带有3 个按钮的居中居中，因为设计看起来有点垃圾

代码

网页预览

图片

问题

是内联的Heading，但我不想成为inline. 有没有办法禁用它？

编辑

如果我Heading在上面模式，Flex那么它将看起来像这个 图像

我正在使用 Chakra UI 创建菜单。我有这样的事情：

我正在尝试在悬停时动态打开标签。MenuList 默认是在用户单击时打开。当我单击按钮然后将鼠标悬停在它上面时，我的悬停状态有效。我正在尝试找出一种方法，以便用户不必单击 MenuButton 即可将鼠标悬停在其上工作。

我正在用 nextjs 和 Chakra UI 建立一个网站。我正在使用情感来设置我的导航样式。

导航组件代码如下：

我在快速刷新时遇到问题。当我启动开发服务器时，导航组件会正确选择样式

上菜后，如果我尝试将顶部位置更改10px为快速刷新并不会反映这些更改。

快速刷新功能与其他组件完美配合，但仅在此特定组件上存在问题。我浏览了几篇文章，但不确定是什么导致了这种行为。

问题是由于某种原因，递增和递减按钮不影响输入中的最终值，但是当您直接在输入中输入值时，值会发生变化。

我猜问题在于将属性 spread 传递...field给getInputProps()，这反过来又重置了值。

我无法在文档中找到答案。我希望 ::after 仅在 min-width: 500px 之后应用。有没有办法做到这一点？谢谢

我有一个受控的脉轮输入组件。如果我将 isInvalid 道具设置为布尔值，我可以正确控制它的外观。

但是，一旦我传递一个函数，它总是显示为无效，即使该函数的计算结果为假。

我也尝试将变量传递给属性，但不会反映对变量的更改。

似乎应该可以动态设置它，因为输入是否有效取决于输入数据的变化。

在我的应用程序中，我希望能够单击一个项目（背景颜色、文本等），弹出一个带有颜色选择器的模式，然后更改项目的颜色。

我遇到的问题是我onClick为父元素创建了一个处理程序来更新背景颜色，但是当单击父元素中的任何内容时它也会激活。

我在Codesandbox中有一个示例，您可以看到，无论您单击背景还是按钮，当我只想为背景激活颜色选择器时，它都会出现。

如果有人熟悉 Chakra-ui，这是我的代码：

有没有办法仅在单击背景时显示颜色选择器？

如果您想查看GitHub 上的真实示例或所有代码，该应用程序也部署在Netlify上。

我试图制作一个完整的响应窗口，其中包含一行。在视频播放上方和底部，一些控件。

我应用了这里推荐的 css 以获得完整的响应保持纵横比https://www.npmjs.com/package/react-player

这是屏幕代码：

这是播放器组件

这是应用的额外CSS：

我尝试用脉轮纵横比组件包装所有内容，但这是我发现的响应式事物最接近的场景，而且它很糟糕。

这也以某种方式影响了 Flex，因为我猜没有应用 flex=5

在更大的屏幕上它会溢出。这个想法是让一切都保持在 100vh。