如何为Chakra UI Toast设置自定义颜色与背景色（适配v2.4.2+Next.js13）

问题概述 #

已封装useToast自定义Hook，在退出登录逻辑中调用时，无法为success状态的Toast设置自定义品牌色（文字brand.white、背景brand.green），直接在组件或调用处添加样式无效；尝试在theme.tsx中配置Alert变体，最初VSCode提示createMultiStyleConfigHelpers不存在，升级到Chakra UI v2.4.2后创建了变体，但Toast仍显示默认白色背景黑色文字。

解决方案 #

Chakra UI完全支持在Alert/Toast中使用品牌色，问题出在配置注册和样式应用的步骤上，以下是两种可行方案：

方案一：全局配置Alert变体（统一风格） #

1. 正确注册自定义Alert主题
   在项目的主题入口文件（如theme.tsx）中，将自定义的Alert变体合并到Chakra主题的components中，并确保品牌色已定义：

   import { extendTheme } from '@chakra-ui/react';
   import alertTheme from './alertTheme';
   
   const theme = extendTheme({
     colors: {
       brand: {
         white: '#ffffff', // 替换为你的品牌白色值
         green: '#22c55e', // 替换为你的品牌绿色值
         tomato: '#ef4444', // 替换为你的品牌红色值
       },
     },
     components: {
       Alert: alertTheme,
     },
   });
   
   export default theme;
   

2. 在Toast调用时指定变体
   修改useLogout中的Toast调用，明确指定使用自定义变体：

   toast({ 
     description: "Successfully logged out!",
     variant: "customSuccess"
   })
   

   或者在封装的useToast Hook中，根据status自动匹配变体，减少重复代码：

   export function useToast() {
     const toast = useChakraToast()
     const handleToast = (props: UseToastOptions) => {
       toast({
         position: "bottom-right",
         isClosable: true,
         status: "success",
         variant: props.status === 'success' ? 'customSuccess' : props.status === 'error' ? 'customError' : undefined,
         ...props,
       })
     }
     return handleToast
   }
   

方案二：局部自定义样式（临时定制） #

如果不需要全局统一风格，可直接在Toast调用时通过styles属性覆盖样式，无需全局配置：

toast({
  description: "Successfully logged out!",
  styles: {
    container: {
      bg: "brand.green",
    },
    description: {
      color: "brand.white",
    },
    // 如需修改标题样式，可添加title字段
    // title: { color: "brand.white" }
  },
})

关键注意事项 #

• 确保Chakra UI版本为v2+，createMultiStyleConfigHelpers是v2新增API，v1版本需使用createStyleConfigHelpers。
• 品牌色必须在主题的colors.brand下定义，否则无法被识别。
• Toast组件内部依赖Alert组件，因此全局配置Alert变体后，Toast需通过variant属性主动引用才能生效。

内容的提问来源于stack exchange，提问作者Mel