I am using ChakraUI for one of my projects and I want to add a Text with Divider like this: In ChakraUI, I could do this: and code: <Flex alignItems={"center"}> <Heading as="h4" size="lg"> About the Department </Heading> <Divider border="4px" borderRadius={"2xl"} /> </Flex> but I want to show the text in one line. Although I could… Read More Text with Divider in ChakraUI

I have a reusable component that receives one of the 2 states according to the use case. Im trying to apply css styles depending which state was provided. Why this does not work and apply only styles from the "status" state? It just ignore that "isVerified" state condition. And im using chakra ui. type Props… Read More css conditioning style applying react

For design, I’m using Chakra UI. I want to put a background image to this div, but I’m not sure how to do it. import React from ‘react’; import { Stack, Heading, Image, Button } from ‘@chakra-ui/react’; import netflixLogo from ‘../../assets/images/netflixLogo.png’; const SignUp = () => { return ( <Stack> <div style={{ width: ‘100%’, height:… Read More React:js: How can i add background Image to a stack or div?

I’ve got a fairly straightforward task which should be working out of the box. But it doesn’t. Input field with a reset value functionality. When the input has a value and a close icon is clicked, the input value should reset. The state of isFocused is handled by the onFocus and onBlur props calling setIsFocused… Read More React input component state is out of sync

createdByModal is basically a chakra modal and I’m using tooltip in it.Whenever i hover on the icons the tooltip shows me on the top of the screen instead of on top of the icon.In the photo you can see the ignore element is showing on the top left corner const CreatedByModal = () => {… Read More Chakra UI : Why tooltip is showing on the top left corner of the screen instead of showing on top of the element?

I was trying to change the background size of a png image but the background is not changing since the background-size works only for elements with background-image property. <Flex overflowX="hidden" justifyContent={"center"}> <Image backgroundColor={"cyan"} backgroundSize="75% 50%" src={heroIllustration.src} width={{ base: "580px", lg: "897px" }} minWidth={{ base: "580px", lg: "897px" }} height={{ base: "518px", lg: "795px" }} alt=""… Read More Change background size of an element without a background image in CSS

I have 2 card that have same properties but has some different props, card 1 (amountBed, amountBath, area), card 2 (area). This’s my code: <HStack spacing={"25px"}> <HStack spacing={"12px"}> <BedroomIcon /> <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}> {amountBed} </Text> </HStack> <HStack spacing={"12px"}> <BathroomIcon /> <Text color={"black.400"} fontWeight={"bold"} fontSize={"16px"}> {amountBath} </Text> </HStack> <HStack spacing={"12px"}> <AreaIcon /> <Text color={"black.400"} fontWeight={"bold"}… Read More Chakra UI: Make HStack disappear with condition

I am querying an API to get an image as response. I would like to show the image when the state is updated. Another problem is that when I don’t have the image, I always get printed the icon of image, and I don’t want that. I tryied to solve this problem with this code,… Read More How to update the image when state is updated?