reactjs - 如何更改Chakra UI Toast组件的背景颜色？

Question

我使用 Chakra UI，我的应用程序中有几个 Toast 组件。默认情况下，它们具有蓝色背景颜色，因为它们具有 status="info"。

如何使用 status="info" 更改所有 toast 的背景颜色？我想保留所有其他默认样式(宽度、位置等)，只需要更改颜色。

Answer 1

Toast组件使用 Alert在幕后。

警报 maps the status prop to a color scheme .这个配色方案是used in the theme definition定义背景颜色。

默认情况下，status="info" 映射到 blue 并使用 subtle 变体。

因此您需要将这样的覆盖添加到您的 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 这样的颜色变量是从 color definitions 中读取的.