CODEWITHSUNDEEP
reactjsuser-interfacetoastchakra-ui
James Moriarty
James Moriarty

Reputation: 51

How to change the background color of the Chakra UI Toast component?

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 all the toasts with status="info"? And I want to keep all other default styles (width, position etc.), need to change only color.

Upvotes: 5

Views: 7446

Answers (5)

dumbrosio
dumbrosio

Reputation: 1

Just extend your theme like so:

    components: {
    Alert: {
        variants: {
            custom_info: {
                container: {
                    bg: "#008c45",
                    color: "white",
                },
            },
        },
    },

and then, in your component...

toast({
        title: "Hey!",
        description:"Prrr.",
        status: "info",
        variant: "custom_info",
});

Upvotes: 0

Farhad Zare
Farhad Zare

Reputation: 1

in extendTheme you have to change style of Alert. this is my solution and it worked.

const theme = extendTheme(
  {
    
    components: {
      Alert: {
          variants: {
            "left-accent": (props:any) => {
              const { status } = props
              return {
                container: {
                  ...theme.components.Alert.variants?.["left-accent"](props).container,
                  bg: `${status}.300`, 
                },
              }
            }
          }
   
      }
    }
  },

Upvotes: 0

Dan
Dan

Reputation: 5070

The Toast component uses Alert under the hood.

Alert maps the status prop to a color scheme. This color scheme is used in the theme definition to define the background color.

By default, status="info" maps to blue and the subtle variant is used.

EDIT (Chakra >= 2.0): Toast now uses the solid variant by default. In the following solution, replace subtle with solid to modify the default appearance.

Hence you would need add an override like this to your theme definition:

import { theme as origTheme, extendTheme } from "@chakra-ui/react"

const theme = extendTheme({
  components: {
    Alert: {
      variants: {
        subtle: (props) => { // only applies to `subtle` variant
          const { colorScheme: c } = props
          if (c !== "blue") {
            // use original definition for all color schemes except "blue"
            return origTheme.components.Alert.variants.subtle(props)
          }
          return {
            container: {
              bg: `${c}.500`, // or literal color, e.g. "#0984ff"
            },
          }
        }
      }
    }
  }
})

Color variables like blue.500 are read from the color definitions.

Upvotes: 15

Adrien Kouyate
Adrien Kouyate

Reputation: 11

You can create your own toast component wrapper like follow

import { Flex, Heading, Text } from '@chakra-ui/react';
import React from 'react';

const BaseAlert = (props) => {
  const { title, details, ...style } = props;

  return (
    <Flex
      flexDirection="column"
      alignItems="center"
      justifyContent="center"
      {...style}
      py={4}
      px={4}
      borderLeft="3px solid"
      borderRight="3px solid"
      borderColor={`${style.colorScheme}.700`}
      bgColor={`${style.colorScheme}.100`}
    >
      <Heading
        as="h4"
        fontSize="md"
        fontWeight="500"
        color={`${style.colorScheme}.800`}
      >
        {props.title}
      </Heading>
      {props.details ? (
        <Text color={`${style.colorScheme}.800`}>{props.details}</Text>
      ) : null}
    </Flex>
  );
};

export const ErrorAlert = (props) => {
  return <BaseAlert colorScheme="red" {...props} />;
};

And use it like that

 toast({
    render: () => (
       <ErrorAlert
          title="Impossible d\'ajouter un nouveau moyen de paiement"
          details="Veuillez ressayer ou nous contacter"
       />
     ),
 });

Upvotes: 0

misterjame
misterjame

Reputation: 11

In the newer versions of Chakra, Toasts are indeed using Alerts under the hood but they have switched to using the solid variant of Alert from subtle. Styling the solid variant of Alert will style your Toast.

Upvotes: 1

Related Questions