• • bounty将在6天后过期**。回答此问题可获得+100声望奖励。Mel希望引起更多人对此问题的关注：我试图找到一种方法来风格脉轮用户界面烤面包与品牌颜色。文档似乎是不正确的。

我正在尝试弄清楚如何添加颜色和backgroundColor样式到我的脉轮UI吐司。
我有一个祝酒词部分：

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
}

我也尝试过使用它，效果很好，但我无法添加颜色样式：

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'd like to find a way to make success equal color: "brand.white" and bg: "brand.green" in the useToast component - but it wont accept those values. I also cant add them in the logout toast.
我能把它们放在哪里？
我尝试向theme. tsx添加属性，如下所示：

components: {
    Button,
    Input,
    Select,
    Textarea,
    // I tried Alert and ToastOptions instead of Toast, but it doesn't make any difference 
    Toast: {
      baseStyle: {},
      defaultProps: {},
      variants: {
        // I tried sprinkling this everywhere - it doesn't make any difference
        background: "unset",
        solid: {
        background: "unset",
        success: {
          background: "unset",
          bg: "brand.green",
          color: "brand.white",
        },
        error: {
          bg: "brand.red",
          color: "brand.white",
        },
        info: {
          bg: "brand.blue",
          color: "brand.white",
        }

      },
      },
    },

但toast组件没有观察到它们。我还尝试将组件头从Toast更改为Alert和ToastOptions，但这两种尝试都不起作用。
注意到[chakra用户界面文档的这一页][1]，我尝试为警报样式定制一个组件，如下所示：

import { alertAnatomy } from '@chakra-ui/anatomy'
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(alertAnatomy.keys)

const baseStyle = definePartsStyle({
  // define the part you're going to style
        variants: {
            solid: {
            background: "unset",
            success: {
                background: "unset",
                bg: "brand.green",
                color: "brand.white",
            },
            error: {
                background: "unset",
                bg: "brand.tomato",
                color: "brand.white",
            },
            info: {
                background: "unset",
                bg: "brand.blue",
                color: "brand.sludge",
            }
        }  
      

  },
})

export const alertTheme = defineMultiStyleConfig({ baseStyle })

VSCode告诉我：
模块"@chakra-ui/react "没有导出的成员" createMultiStyleConfigHelpers "
我用的是"@chakra-ui/react "："2.4.4"，并且无法让脉轮用户界面文档中显示的方法工作。[1]：https://chakra-ui.com/docs/components/alert/theming