问题标签 [chakra-ui]

我遇到了 Chakra UI 框或弹性项目的问题（不确定是哪一个导致了问题）。我不能让它们在平板电脑和手机上占据 100% 的宽度。我设法使它工作的唯一方法是定义大众宽度，但这并不是在所有设备上都响应。

现在的样子：

它应该看起来如何： 代码（不工作的代码部分是第一个三元选项）：

所有其他页面组件都在 Section 组件中作为子组件，它们工作正常，只是这个导致了问题...... Section 组件代码：

我正在尝试在两个不同的组件上使用Chakra UI useDisclosure 钩子。基本上，我有一个带有按钮的父组件和一个带有不同按钮的子组件。我想onToggle在父组件和onClose子组件中使用——并让它们都控制isOpen子组件的状态。这可能吗？如果是这样，怎么做？谢谢。

我有这样的事情：

这是两个不同的断点。当容器被表单拉伸时，map 会填充它的容器，但是当 flex 将方向更改为 row 时，它不会。如何在不为地图高度提供固定值的情况下解决此问题？

我正在使用 Chakra UI lib，但这并不重要，纯 css 解决方案也可以。

更新：

如果我将 height:100vh 放在容器地图显示中，并且在小断点上很好，但它会破坏更大的断点，它们就会被拉伸。所以我只需要找到他们之间的甜蜜点。

我能够在可点击的表格中创建一行，这就是我想要的：

https://codesandbox.io/s/crazy-sinoussi-hxtwj?file=/src/app.js

但是，我不希望第一个单元格有下划线。我只是希望它显示为常规文本。我怎样才能做到这一点？

我正在尝试将图标正确放置在输入中间，该输入具有size="xs". 但是，我所有的尝试都失败了，并且图标一直定位得太低/太低。我也尝试过使用IconButton而不是常规图标，但这也不起作用。

我究竟做错了什么？

这是代码框。请注意，在此代码框中，图标实际上位于 Input 的中间上方（这仍然是错误的），而不是在我的本地计算机上的下方。

https://codesandbox.io/s/optimistic-bartik-5ifsd?file=/src/App.tsx

我里面有这个简单的函数app.tsx来呈现一个表格。标题很好看（黑底白字）。

但是，如果我将文件名改为app.jsx，则将呈现同一个表，但标题很难看到：

要复制这个：

然后打开localhost:9000并更改app.jsx并app.tsx观察代码重新编译后标题颜色如何变化。

清晰可见时的标题元素（app.tsx）：

不是 ( app.jsx) 时的标题元素：

编辑：我能够通过放入（除了）来“修复<ChakraProvider theme={darkTheme}>”app.jsx它index.tsx。检查标头的元素以查看它为什么被修复，th标签内的类回到了正确的css-4v3u8n，而不是不正确的css-r10se1。我不知道这意味着什么或如何正确修复它（即如何修复它而不必使用ChakraProvider两次）。

我的index.tsx：

和我的模块规则webpack.config.js：

我的.babel.rc：

我的package.json：

考虑一下我有这个自定义的 React 组件。

我希望在我的应用程序中包含这个组件，作为每次实例化它的位置的样式。例如，我可以通过将其包装在 Box 中来做到这一点。

有没有办法编写一个组件，它会接受直接传递给它的 Chakra UI 样式道具？这个想法是为了布局而取消额外的 Box 使用，并最终得到类似这样的东西。

我已经查看了Chakra 工厂功能，但理想情况下，我正在寻找组件本身的解决方案。

我启动了一个组件库，基于tsdx --template react-with-storybook，添加chakra-ui/react为依赖项，然后在其中创建组件。

这些组件使用来自 Chakra 的默认主题的颜色 - 特别是blue.700.

在 Storybook 中，我将组件包装在 中<ChakraProvider>，并且它可以工作。我构建了库并将其放在 npm 中。

现在在我的应用程序（基于create-react-app）中，我安装了库，导入并应用了<ChakraProvider>，使用了组件——它可以工作，除了样式。

在 HTML 源代码中，我可以看到颜色仍然是 string "blue.700"，因此没有使用主题将其转换为颜色。

这个脉轮 UI 位：

变成生成的 div 具有的这个 CSS 类：

ChakraProvider 显然做了一些事情，例如页面中添加了许多 CSS 变量，包括--chakra-colors-blue-700.

我想也许我的应用程序中使用的 ChakraProvider（来自它自己的@chakra-ui/react依赖项）使用了与库中不同的 React 上下文，所以我决定在库中添加一个导出（export { ChakraProvider } from '@chakra-ui/react';），现在我从我的库中导入它应用程序; 但这没有效果。

会发生什么？有谁知道如何调试这个？

我正在使用 nextjs 和 chakra ui 并做了一些让我所有的组件样式消失的事情。在我的样式输出中，我可以看到组件样式以及浏览器中的计算样式，但它们没有转换为有效的 css 属性。

提供者在范围内 (_app.tsx)：

我不确定是什么可能导致这种情况。

现在，当我通过深色/浅色主题按钮切换更改颜色模式时，页面背景颜色将在 0.2 秒左右的时间内融入新的背景颜色，所有其他颜色将立即变为新颜色。我想定义一个颜色模式切换转换时间，或者至少让它们在元素之间相同。

我只是明确地设置了所有东西的背景，这样所有东西都会立即改变颜色。但是，如果我可以快速过渡，我会喜欢它。