如何在Chakra主题配置中修改伪类属性？

你在主题配置里直接给Tab组件设置_selected样式无效，是因为Chakra的组件主题样式需要嵌套在baseStyle、variants这类属性下，不能直接放在组件根对象中。

正确配置方式 #

全局基础样式（所有Tab生效） #

把_selected样式放在baseStyle下，所有Tab组件的选中状态都会应用该样式：

const theme = extendTheme(
    {
        colors: {
            primary: {
                50: '#1f244333',
                100: '#1f244344',
                200: '#1f244388',
                300: '#1f244399',
                400: '#1f2443AA',
                500: '#1f2443EE',
                600: '#1f2443FF',
                700: '#1f2443DD',
                800: '#1f2443EE',
                900: '#1f2443FF',
            },
            secondary: '#5ab03b',
            background: '#f8f8f6',
        },
        components: {
            Tab: {
                baseStyle: {
                    _selected: {
                        color: 'white',
                        borderBottom: '2px solid #54b039',
                    }
                }
            },
        },
    },
    withDefaultColorScheme({
        colorScheme: 'primary',
    })
)

针对特定变体设置 #

如果你的Tab使用了特定变体（比如默认的outline），可以把样式放在对应变体下：

components: {
    Tab: {
        variants: {
            outline: {
                _selected: {
                    color: 'white',
                    borderBottom: '2px solid #54b039',
                }
            }
        }
    }
}

注意：如果用了自定义变体名称，要替换成你实际使用的变体名。

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