问如何更改Chakra UI Toast组件的背景色？

EN

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"
            },
          }
        }
      }
    }
  }
})

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} />;
};

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