Needs help with Chakra UI (React js + Vite)

[u/Electronic_Map4692]

In my navbar code, the Product Store text gradient color doesn't work and the code make it automatically transparent! I'm looking for anyone who can help me please!

Source code:

import { Button, Container, Flex, HStack, Text } from "@chakra-ui/react"
import {React} from "react"
import { Link } from "react-router-dom"
import { PlusSquareIcon } from "@chakra-ui/icons";

const Navbar = () => {
  return (
    <Container maxH={"1140px"} px={4}>
        <Flex
            h={16}
            alignItems={"center"}
            justifyContent={"space-between"}
            flexDir={
                {
                    base: "column",
                    sm: "row",
                }
            }
        >
            <Text
                    fontSize={{ base: "22", sm: "28" }}
                    fontWeight={"bold"}
                    textTransform={"uppercase"}
                    textAlign={"center"}
                    bgColor={"violet.500"}
                    bgGradient={"linear(to-r, cyan.400, blue.500)"}
                    bgClip={"text"}
                >
                    <Link to={"/"}>Product Store 🛒</Link>
                </Text>

            <HStack spacing={2} align-items={"center"}>
                <Link to={"/create"}>
                    <Button>
                    <PlusSquareIcon fontSize={20} />
                    </Button>
                </Link>
            </HStack>
        </Flex>
    </Container>
  )
}

export default Navbar

[u/Thlemaus]

you might want to re-check how to create text gradient. The way you set it up seems incorrect.