问题标签 [chakra-ui]

TLDR，在这 3 之间进行集成时出现错误。但是当我将 Meteor 与 ChakraUI 一起使用时，它运行良好。但是当我添加反应路由器时，它会抛出这个错误

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

所以在 Meteor 中，我使用 ChakraUI 提供程序和浏览器路由器将应用程序包装在client/main.jsx中。Chakra 需要根据他们的文档将应用程序包装在他们的提供程序中。

然后在imports/ui/App.jsx 中我放了react route switch 来渲染页面。在此之前，我将 Home.jsx 代码放入其中。

那么我的代码中是否有任何错误的方式来“包装”应用程序？

谢谢

这是codeandbox链接

这是代码

我想有两个标签；第一个选项卡显示“Hello World”，而第二个选项卡有一个画布元素（我正在使用 react-sketch）。但是，当我单击第二个选项卡时，不会呈现画布元素。由于某种原因，它的宽度和高度为零。我最初认为这是 react-sketch 的问题，所以我尝试了另一个画布组件（react-canvas-draw），该组件仍然存在同样的问题。因此，这很可能是 Chakra UI 选项卡如何工作或 react 如何呈现事物的问题。

如何解决这个问题？我想让我的画布组件采用“剩余高度和宽度”，这就是为什么我使用“100%”之类的东西而不是 vh 或 vw，因为我不知道我的画布剩余的高度或宽度零件。

注意：然而我注意到的一件有趣的事情是，如果您将 defaultIndex 更改为 1（即，使第二个选项卡最初处于活动状态），画布组件将起作用。不知道为什么这行得通，而另一种方式则行不通。

当用户开始滚动时，我正在尝试使用交叉点观察者 API 有条件地在 CSS 网格中显示项目，但它似乎进入了无限渲染循环。这是我的代码。

这是我在 StackBlitz 上的实时代码的链接

另外，我要实现的目标是在可以避免的情况下不要在屏幕上渲染太多项目。我不确定是否display: none真的让浏览器工作得更少。如果这不是正确的方法，请告诉我。

感谢您阅读我的问题。非常感谢任何帮助。

这是代码框链接：https ://codesandbox.io/s/focused-cookies-jbqqw?file=/src/App.js

这是我的代码：

我希望只有聊天组件有溢出，而整个页面不应该有溢出/滚动。也就是说，整个网页不可滚动，但只有聊天组件有滚动。这在许多网站布局中都可以看到，但我的溢出没有按照评论中的说明工作。

注意：请忽略大量的lorem文本。我添加了这个来模拟我的滚动不起作用的事实。这可以是任何其他 html 组件，而不仅仅是 lorem 文本。

Chakra 在 pages 文件夹中运行良好，但是当尝试在 components 文件夹中使用它时，问题就开始了。

我添加ChakraProvider了识别属性，到目前为止一切都很好，但是Accordion不起作用，让手风琴在自己的组件上工作的正确方法是什么？

我有以下文件夹结构：

源代码

• 资产
• 成分
  • 标题
  • 页脚
• 挂钩
• 页面
• 服务
• 风格

页面/app.tsx

页面/_document.tsx

这就是问题所在。组件/页脚/index.tsx

我在 Next.js 中遇到了 Chakra UI 的问题。我已经正常安装了所有软件包。我已经编辑了_app.tsx。

但是当我尝试启动开发服务器时，它给了我一个这样的错误：

请帮我。太感谢了。

我在 React js 中安装了 chakra-ui，当我设置索引 js 来放置 ChakraProvider 时，我在成帧器动作上出现错误 TypeError: framer_motion__WEBPACK_IMPORTED_MODULE_1__.motion.custom is not a function

尝试将 ChakraUI 添加到我的 create-react-app 后，出现错误。希望得到任何帮助（也感谢向stackoverflow问题添加内容的建议）

我按照https://chakra-ui.com/docs/getting-startedyarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4中的建议运行

我使用 CRA 来启动我的应用程序，但在我已经开始一些开发之后决定添加脉轮。这就是为什么我没有使用yarn create react-app my-app --template @chakra-ui

但是，在运行后yarn我yarn start收到有关 framer-motion 的错误：[TypeError: framer_motion__WEBPACK_IMPORTED_MODULE_1__.motion.custom is not a function][1]

我的 index.js 文件如下所示：

包.json：

使用反应版本：17.0.1

提前感谢您的任何建议 [1]：https ://i.stack.imgur.com/Vs3oU.png

我刚开始使用 Chakra UI，我对如何覆盖他们的默认主题感到非常困惑。特别是背景图像。当我将 ChakraProvider 添加到我的主应用程序时，它会为页面的主体设置默认的白色背景，并且它会忽略我在 App.css 中设置的我自己的背景图像有人知道如何覆盖它吗？

应用程序.css

应用程序.js

这是检查员在网页上显示的内容。标有删除线的是那些被忽略的。如果取消选中 chakra-ui 默认提供的白色背景属性，我的背景图像就会出现

我正在尝试这样做：

但是当这样使用它时它不起作用（main.500 无法识别）：

什么是正确的方法？谢谢。