如何修改Chakra UI中status为info的Toast组件的背景色？

Chakra UI 支持通过扩展全局主题的方式批量修改status="info"类型Toast的背景色，且不会影响其余默认样式，操作步骤如下：

步骤1：定义自定义主题，覆盖Toast的info样式 #

通过extendTheme方法合并默认主题，仅修改Toast组件info变体的背景色配置即可：

import { extendTheme } from '@chakra-ui/react'

const customTheme = extendTheme({
  components: {
    Toast: {
      variants: {
        // 对应status="info"的Toast样式
        info: (props) => ({
          // 保留默认样式的其余配置，仅覆盖背景色
          ...props.theme.components.Toast.variants.info(props),
          // 替换为你需要的背景色值
          bg: 'green.100',
          // 如果背景色修改后文字/图标对比度不够，可以同步调整文字、图标的颜色，不需要的话可以删掉以下配置
          color: 'green.800',
          '.chakra-toast__icon': {
            color: 'green.600'
          }
        })
      }
    }
  }
})

步骤2：将自定义主题注入应用 #

把上面定义的customTheme传入应用根节点的ChakraProvider即可全局生效：

import { ChakraProvider } from '@chakra-ui/react'

function App() {
  return (
    <ChakraProvider theme={customTheme}>
      {/* 你的应用其余代码 */}
    </ChakraProvider>
  )
}

可选：仅修改单个Toast的背景色 #

如果你不需要全局修改，只想调整特定Toast的样式，可以在调用Toast方法时直接传入自定义样式：

toast({
  title: '提示内容',
  status: 'info',
  style: {
    background: 'purple.100'
  }
})

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