I'm currently exploring ways to incorporate color and background styles into my Chakra UI toast component.
Below is a sample code snippet of my custom toast component:
import type { UseToastOptions } from "@chakra-ui/react"
import { useToast as useChakraToast } from "@chakra-ui/react"
export function useToast() {
const toast = useChakraToast()
const handleToast = (props: UseToastOptions) => {
toast({
position: "bottom-right",
isClosable: true,
status: "success",
...props,
})
}
return handleToast
}
Although the toast functionality works, I am struggling to apply color styles to it. Here's an example where I attempt to use the toast:
import { useApolloClient } from "@apollo/client"
import { useRouter } from "next/router"
import { useToast } from "./useToast"
export const useLogout = () => {
const client = useApolloClient()
const router = useRouter()
const toast = useToast()
const handleLogout = async () => {
await router.replace("/logout")
await fetch("/api/logout", { method: "post" })
await client.resetStore()
toast({ description: "Successfully logged out!" } )
}
return handleLogout
}
I am looking for a way to define success with color: "brand.white" and bg: "brand.green" in the useToast component. However, these values are not being accepted. I have also tried adding them in the logout toast without success.
Where should I specify these color properties?
I attempted to add properties to my theme.tsx file as follows:
... ... ...Module '"@chakra-ui/react"' has no exported member 'createMultiStyleConfigHelpers'
I am currently using version "2.4.2" of "@chakra-ui/react", and I am unable to implement the method described in the Chakra UI documentation.
Next step:
I came across this post discussing issues with next v13. After trying versions 2.4.4 and 2.4.2, I settled for 2.4.2 due to compatibility concerns with 2.4.4.
In an attempt to customize alert styles, I created an alert.ts file with shades of green for success and red for error, defined as brand colors in my extendTheme:
... ... ...Despite these efforts, when using this custom styling in my toast, I consistently get a white background with black text. The appearance remains unchanged regardless of success or failure.
Is it possible for Chakra to utilize brand colors in alerts?
The useToastOptions.ts file contains:
... ... ...