chakra-ui Questions
5
I use Chakra UI and I have several Toast components in my application. They have a blue background color by default since they have status="info".
How can I change the background color of...
Ostracoderm asked 11/10, 2021 at 19:19
3
Solved
I have a select dropdown using ChakraUI, it like:
<Select color={"white"} bg={"black"}>
<option value="option1">Option1</option>
<option value=&...
5
<Head>
<title>Real Estate API Application</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport"...
Leonorleonora asked 24/4, 2023 at 9:57
2
Solved
I am using Chakra-UI to create a UI for my NextJS project, and am struggling to get the navbar working correctly. It is fixed correctly as well as the mobile nav menu but the menu sits in front of ...
Colonic asked 7/1, 2022 at 19:26
3
I'm currently learning how to use ChakraUI
When trying to load local images using
import { Box, Heading, Text, Image } from "@chakra-ui/react"; they don't display at all, just the alt tex...
1
This one is giving me a headache..
Perhaps I'm just missing something silly, hope you guys can help.
The whole html element has a width of approximately 80% of the screen on mobile devices.
On a la...
Sourwood asked 29/5, 2021 at 2:12
6
Solved
I am using Chakra UI and I want to use two modals in a single component.
const { isOpen , onOpen, onClose } = useDisclosure()
<Button colorScheme="teal" size="xs" mr='2' on...
Baleen asked 1/2, 2021 at 7:24
3
Solved
I am using react and Chakra UI
I want the icons and text to be side by side.
Icons are displayed out of alignment.
<HStack alignItems="center" gridGap="8px">
<UsersIc...
2
Solved
There is a custom hook useDisclosure() provided by chakraUI which returns isOpen, onClose , onOpen.
const { isOpen, onOpen, onClose } = useDisclosure()
The onOpen is passed to the onClick of the ...
Rouault asked 22/1, 2021 at 8:48
2
Solved
i extended the theme provider in chakra_ui
import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";...
Dripdry asked 22/11, 2020 at 7:9
2
Solved
I'm trying to use React Server Component (with NextJS 13) in Chakra UI but I think it's not yet possible.
From Chakra UI docs (https://chakra-ui.com/getting-started/nextjs-guide):
In my example I ...
7
Solved
I'm trying to install @chakra-ui and use it with Next, but it doesn't work at all. I uninstalled and installed it again and it doesn't work.
I used npm i @chakra-ui/react @emotion/react@^11 @emotio...
Athapaskan asked 29/9, 2022 at 15:9
3
Solved
I'm trying to build nextjs project with chakra UI, but my custom theme doesn't working at all, I've tried everything in chakra docs, even custom color which I've added doesn't work, but default col...
Cenogenesis asked 15/5, 2022 at 8:18
6
i want to create custom sized modals in chakra UI in react js.
the modal should have width 1000px and height 800px
I have tried to create a custom sized modal by using themes where I have overriden...
3
I want to build my own web-based version of MS Paint using React. I have the basic javascript canvas code written and now I want to make a nice gui with a menu bar across the top, and a section on ...
Adoree asked 10/6, 2022 at 8:54
2
Solved
I recently tried to integrate Chakra UI into my Next.js app. I have followed every step in the guide in their docs: https://chakra-ui.com/getting-started/nextjs-guide
However, when I set the initia...
Rodrique asked 7/12, 2022 at 16:35
3
Solved
I can't figure our how to make the Chakra component inline. Read the documentation but couldn't figure out the right property or if this is a css class thing.
<Text> Hello World, </Text>...
2
Full Error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component...
Lindemann asked 16/9, 2021 at 15:26
4
How to set my App component to full height? I even tried to set body tag to height 100% in my index.html but it didn't work out
4
Working with Chakra for the first time and trying to change the default font to Times New Roman in Chakra UI but get no effect.
Did an import, assigned new theme, passed it as props to ChakraProvid...
Frill asked 25/1, 2021 at 14:5
3
Solved
I am using the "dark mode" feature provided by the Chakra UI library. However, I can't figure out how to change the "dark mode" colors. In the documentation, I see that Chakra U...
2
Solved
I'm trying to create back to top button with Chakra UI but not sure how to show the BTT button only after the user scrolls a bit for example after the heading section or after 500px
<Link to='/#...
4
Solved
I'm working with Chakra UI and i needed to customize the scrollbar style using the css pseudo element ::-webkit-scrollbar, but Chakra UI doesn't seen to have this pseudo element and a I don't know ...
1
Solved
The Problem
Any CSS classnames I write will not override Chakra UI component styles, even when passing them directly as className, ex: <Button className="my-class-that-wont-work">
R...
1
I'm using a Chakra UI Modal in a React application. I want to disable closing the modal when the user clicks outside it, but I can't find any way to do it.
The documentation for the Chakra UI Modal...
1 Next >
© 2022 - 2024 — McMap. All rights reserved.