我有一个登录页面 我想使用 jest 对此页面进行快照测试。 我将Login.test.tsx创建为 这是测试使用 chakra-ui 创建的 web 个页面的正确方法吗? ...
我有一个登录页面 我想使用 jest 对此页面进行快照测试。 我将Login.test.tsx创建为 这是测试使用 chakra-ui 创建的 web 个页面的正确方法吗? ...
我构建了一个自定义组件,并允许使用BoxProps将其作为另一个组件重新渲染: 当我尝试使用as={Button}道具时它运行良好 但是我不能使用Button上可用的variant属性 ...
我正在开发一个网站并想让它响应。 我在背景颜色方面遇到了一些问题。 我看到了我想要的页面,但是在将它部署到 firebase 并在手机上查看它之后,背景 colors 发生了巨大变化。 第一张图是结果,第二张图是我想要的样子。 有任何想法吗? 我正在使用反应和脉轮用户界面。 ...
赏金将在 7 天后到期。 此问题的答案有资格获得+50声望赏金。 Snehil Agrahari想让更多人关注这个问题: 需要一种方法来实现所需的壮举当用户在我的反应应用程序中发出任何请求时,我试图显示警报。 问题是目前我正在为单独的组件使用单独的 toast 组件。 我应该如何在整个应用程序中 ...
所以我有一个 header 我正在使用Flex 。 在那个 header 中,有一个项目我想在 header 的中心对齐。下面是一些示例代码演示return ( <Box> <Box paddingTop={5} paddingBottom={5} paddingLef ...
我不知道如何从项目文件夹加载图像以用作 Chakra-UI Avatar。 src 属性好像只能带外链。 我正在处理的组件文件位于 src/Components/ 文件夹中,我要加载的图像位于 src/images 文件夹中。 为什么这不能渲染我的头像,有没有办法让它工作? ...
如果输入文本为空或超过 150 个字符,我试图禁用表单上的提交按钮。 出于某种原因,如果输入大于 150 个字符,它就可以工作,但当它为空时就不能工作,我不确定为什么。 我已经尝试了一切,但我仍然被困住了。 我不确定是因为我使用的是 Chakra UI 还是其他原因。 先感谢您。 这就是我所拥有的: ...
我正在处理 Chakra UI 中的卡片组件。 卡体中的堆叠分隔器未显示。 它是否需要以特定方式格式化才能显示? 比如设置一定的宽度?<Card width={"100%"} borderWidth="1px" borderRadius="l ...
我正在尝试使用 Framer Motion 制作一个简单的 animation,其中一个组件漂浮在其中并从左侧变为不透明。 该组件位于英雄部分的正下方,但在页面顶部时不会出现在视口中(英雄部分是整个视口高度)。 该组件与英雄部分位于单独的 div 中。 请注意,如果这与此有关,我正在使用 Chakr ...
我正在研究 Chakra UI 中的搜索组件。 您应该如何在 InputGroup 的单个 InputRightElement 中放置两个 IconButton? 第二个 IconButton 位于输入字段之外。<InputGroup size="lg" shadow={"md"} bord ...
我正在使用查克拉用户界面。 我想创建一个水平滚动的视图。 有一个组件可以显示/添加标签,如下所示。 像这样使用我想让标签排列的区域水平滚动。 我怎样才能做到这一点? 我知道这可以通过使用特定的 CSS 属性来解决。 但是,我对web前端技术不熟悉,所以不知道该怎么做。 我读过 overflow= ...
我会写一些关于我的项目的信息。 框架: NextJs,低于版本 13 UI 框架: ChakraUI(使用预定义组件,主要是 Flex) 想法如下:我已经测试并确定了哪些屏幕尺寸应该需要 UI 上的元素行为更改,并决定编写代码来促进该功能。 做这样的事情,我将避免为每个页面/组件编写 @media ...
我的手风琴的顶部和底部有一条灰色线,我希望它不存在如何去除这些线? https://chakra-ui.com/docs/components/accordion#styling-the-expanded-state手风琴在这里我浏览了 styles 但没有运气 ...
我目前正在使用 Chakra UI 和 Typescript 构建一个网站。主标题的最后一个字与标题的 rest 颜色不同。 例如,在以下代码段中,C 的颜色应该不同于 A 和 B。 我已尝试通过多种方式解决此问题,包括拥有多个 header 元素并将它们与 flex 水平对齐。 但是,我发现此方 ...
我们正在研究 flipkart.com 的克隆项目。我们正在团队中工作。所以我们已经分发了我们的作品。 其中一个人在使用 material UI 开发登陆页面,而我在使用 chakra ui 开发产品页面,但在合并应用程序后无法正常工作并产生不熟悉的错误。 所以,请提供一些解决方案,以便我们进行演 ...
我正在使用脉轮 UI 组件 UI package。 模态叠加总是覆盖所有屏幕。 如何让 ModalOverlay 只覆盖有限的屏幕? 这是一个例子。 覆盖仅覆盖中心屏幕,粉红色区域除外 https://i.stack.imgur.com/kbxEC.png ...
我有一个编辑表单,其中有一个输入,用于发送一组数据。 但是,在编辑表单中,即使输入返回了一组要编辑的数据,它们也是单个值。 也就是说,如果我删除此输入中返回的数据,则所有数据都会被删除。 此外,输入中的名称都粘贴在一起。] 如果可能的话,我想尝试的是在编辑表单中以这种方式返回数据: 从那里,我可以 ...
我正在做将 chakra ui 与 create-react-app 结合使用的第一步。 UI 将是一个实时数据查看器(使用 react-plotly)。 如果由 send_plot_data 触发,socket.io 服务器每秒发出新的 json 数据,并且 ui 应该使用 plotly-re ...
我试图在我的 Next JS 13 应用程序目录中实现进度条。 但旧方法不起作用。 有没有办法让进度条工作? 我使用NextNProgress和NProgress包。 但他们都没有工作。 我什至尝试使用next/route和Chakraui progress 从头开始创建自己的。 但没有运气 这是我 ...
需要用 chakra ui 创建侧边栏菜单 Creating nested sidebar menu with chakra ui.Need to create nested sidebar menu with chakra ui.Thnks 提前 ...