我使用 Chakra UI,我的应用程序中有几个 Toast 组件。默认情况下,它们具有蓝色背景颜色,因为它们具有 status="info"
。
如何使用 status="info"
更改所有 toast 的背景颜色?我想保留所有其他默认样式(宽度、位置等),只需要更改颜色。
最佳答案
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 中读取的.
https://stackoverflow.com/questions/69531448/