Toast组件在后台使用Alert。
Alert将status属性Map到一个配色方案。这个配色方案在主题定义中用来定义背景色。
默认情况下，status="info"Map到blue，并使用subtle变体。

编辑（脉轮>= 2.0）：吐司现在默认使用solid变体，在下面的解决方案中，将subtle替换为solid，修改默认外观。

因此，您需要在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"
            },
          }
        }
      }
    }
  }
})

字符串
像blue.500这样的颜色变量从颜色定义中读取。

在Chakra的新版本中，Toast确实在引擎盖下使用了Alerts，但他们已经从微妙切换到使用Alert的固体变体。样式化Alert的固体变体将样式化您的Toast。

您可以创建自己的吐司组件 Package 器，如下所示

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

型

在extendTheme中，你必须改变警报的样式。这是我的解决方案，它起作用了。

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`, 
                },
              }
            }
          }
   
      }
    }
  },

字符串