Chakra UI is a simple, modular and accessible component library for React applications.
Questions tagged [chakra-ui]
78 questions
1
vote
2 answers
How to close drawer in chakra Ui programmatically
Chakra Ui provides disclosure
const { isOpen, onOpen, onClose } = useDisclosure();
and in the documentation this button will close the drawer
they haven't provided…
Jash Jariwala
- 33
- 4
1
vote
1 answer
React - Sorting Table Columns Inside a Map() Method
I am trying to sort a table (ascending/descending) when my table header data is placed inside a .map() method (see line 73 of the codesandbox link in this post).
I can get the hand emoji to change onClick, but no sorting takes place. I think it may…
Jon
- 361
- 2
- 10
1
vote
0 answers
ChakraProvider not working in NextJs react v16.4.0 but works with react v17.0.1
When trying to add ChakraProvider to my NextJs app root I get the error:
Uncaught Error:expected a string. You forgot export your component from the file its defined,or you might have mixed up default/named import
…
Dozie
- 21
- 4
1
vote
0 answers
How to set custom transitions in Chakra UI theme
I wanted to create theme like this:
extendTheme({
textStyles: {
title: {
fontSize: "40px",
fontWeight: "500",
letterSpacing: '-0.6px',
lineHeight: '48px'
}
},
transition:…
mmmm
- 3,305
- 8
- 30
- 60
1
vote
1 answer
Can't use default colors inside extendTheme (ChakraUI)
I'm trying to do this:
import { extendTheme } from "@chakra-ui/react";
import Fonts from "./Fonts";
const theme = extendTheme({
fonts: {
logo: "Satisfy",
},
colors: {
main: {
500: "red.500",
},
},
});
but when using it…
morh
- 61
- 1
- 6
1
vote
1 answer
getting an error when installing chakra ui on react js
I installed chakra-ui in React js, and when I setup index js to place ChakraProvider I got an error on the framer motion
TypeError: framer_motion__WEBPACK_IMPORTED_MODULE_1__.motion.custom is not a function
Rizal Pangestu
- 13
- 2
1
vote
0 answers
Chakra UI does not work correctly for own components
Chakra works well in the pages folder, but when trying to use it in the components folder, the problems start.
I added ChakraProvider to recognize the properties, so far so good, but the Accordion doesn't work, what is the correct way to make the…
Denner Luan
- 11
- 3
1
vote
1 answer
Meteorjs Integration with ChakraUI + React Router
TLDR, I got an error when integrating between those 3. But when I use Meteor with ChakraUI, it works nicely. But when I add react router, it throw this error
Warning: React.createElement: type is invalid -- expected a string (for built-in…
David_Try_Everything
- 71
- 4
1
vote
1 answer
How to fix these errors while installing chakra-ui and react app?
How to resolve these errors while installing chakra-ui and react app?
**user@user:~/Desktop/Projects$ npx create-react-app my-app --template @chakra-ui**
[Error][1]
Creating a new React app in /home/user/Desktop/Projects/my-app.
Installing…
Jeswanth Mukesh
- 11
- 2
1
vote
1 answer
I want to change the default style of the chakra ui button
I am using chakra ui.
I want to change the Button Color to #2477b3.
I can change it by passing the value in the props, but it takes a lot of time and effort to pass the value in the props every time, so I want to change the default Button color,…
sato desu
- 29
- 4
1
vote
1 answer
Can't click button inside a clickable div
I am using Chakra UI in react, When I am trying to click a Button inside a clickable Box, The function of Box is being executed. Z-index also not fixing the issue.
My code:
Hadi azeez
- 49
- 6
1
vote
1 answer
how to customize box-sizing in chakra ui?
I wanna customize global style in chakra ui so that my all elements box-sizing is changed to border-box!
This is my trial. But nothing happen..
import { extendTheme } from '@chakra-ui/react';
const overrides: object = {
styles: {
global: {
…
Hoon
- 11
- 1
1
vote
1 answer
Formik Form Not submitting from Modal Component
A have some form field that is on the Normal Page and on a Modal, i want the Modal button to trigger the submit event. Whenever i use the submit type="submit" on the Modal button, i get no resposnse. But if i use it in the Normal page button it…
AbdulAzeez Olanrewaju
- 480
- 2
- 12
1
vote
0 answers
Gatsby w/ Chakra UI ColorMode not working
I'm using Gatsby w/ Chakra UI and have an issue with either local storage or how the ColorMode is being accessed.
Here's my repo: https://github.com/RyanPinPB/pdm-gatsby
Live site: https://pearsondigitalmarketing.com
ColorMode and components are…
RyanPinPB
- 43
- 4
0
votes
1 answer
How to replace a React Components with another React Components?
I got something like this
How I can do it?
Thinh Nguyen
- 1
- 4