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

Question

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

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

Answer 1

该组件在幕后Toast使用。Alert

Alert 将statusprop 映射到配色方案。该配色方案在主题定义中用于定义背景颜色。

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

编辑（Chakra >= 2.0）：Toast 现在solid默认使用该变体。在以下解决方案中，替换subtle为solid以修改默认外观。

因此，您需要在主题定义中添加这样的覆盖：

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是从颜色定义中读取的。