如何重置Chakra UI按钮默认样式并移除默认悬停透明度效果

要完全移除Chakra UI按钮的默认悬停透明度效果，你需要确保自定义样式完全覆盖默认的悬停属性，具体可以通过以下两种方式实现：

方法1：在目标变体中明确重置悬停属性 #

Chakra UI的按钮组件默认在_hover状态下会自带透明度或背景色调整逻辑，你可以在自定义的solid变体里，将不需要的默认属性重置为初始值。如果只想移除透明度变化，直接把opacity设为1即可：

baseStyle: {
    borderRadius: '6px',
    fontWeight: 700,
    fontSize: '14px',
},
variants: {
    solid: (props) => ({
        bg: mode('light', 'dark')(props),
        color: mode('white', 'darkLight')(props),
        // 重置悬停透明度为初始值，覆盖默认样式
        _hover: {
            opacity: 1,
            // 若存在其他默认悬停效果（比如背景色变化），可同步重置
            // bg: mode('light', 'dark')(props),
        },
    }),
},
};

方法2：全局重置按钮默认悬停样式（适合全项目统一修改） #

如果你想让所有按钮都移除默认悬停透明度，可以在Chakra UI的主题配置中，针对按钮组件的全局基础样式进行重置：

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

const theme = extendTheme({
    components: {
        Button: {
            baseStyle: {
                borderRadius: '6px',
                fontWeight: 700,
                fontSize: '14px',
                // 全局消除悬停透明度变化
                _hover: {
                    opacity: 1,
                },
            },
            variants: {
                solid: (props) => ({
                    bg: mode('light', 'dark')(props),
                    color: mode('white', 'darkLight')(props),
                }),
            },
        },
    },
});

export default theme;

关键说明 #

Chakra UI的样式采用层叠优先级：自定义变体样式 > 组件baseStyle > 默认主题样式。只要在对应层级明确设置_hover.opacity: 1，就能完全覆盖默认的透明度修改逻辑。如果还有其他不需要的悬停效果，只需把对应属性设为与初始状态一致的值即可。

内容的提问来源于stack exchange，提问作者Данияр Булдаков