如何移除MUI按钮的悬停颜色？已尝试方法未生效

云上老周

2026-8-5

解决MUI Styled组件按钮悬停背景色无法移除的问题

1. 正确的Styled组件写法

用MUI官方styled工具时，需保证选择器语法正确，同时结合MUI内置类名提升优先级，覆盖默认悬停样式：

针对Contained变体按钮

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const LoginButton = styled(Button)(({ theme }) => ({
  // 自定义基础样式
  padding: '8px 24px',
  // 重置悬停背景及关联样式
  '&:hover, &.MuiButton-contained:hover': {
    backgroundColor: 'transparent',
    color: theme.palette.primary.main, // 保持原文字颜色
    boxShadow: 'none', // 可选：移除悬停阴影
  },
}));

针对Outlined/Text变体按钮

根据按钮变体替换对应内置类名即可：

const LoginButton = styled(Button)(({ theme }) => ({
  // Outlined变体写法
  '&:hover, &.MuiButton-outlined:hover': {
    backgroundColor: 'transparent',
    borderColor: theme.palette.primary.main,
  },
  // Text变体写法（按需切换）
  // '&:hover, &.MuiButton-text:hover': {
  //   backgroundColor: 'transparent',
  // }
}));

2. 内联SX样式的优先级修复

如果内联sx写法失效，可通过!important强制覆盖高优先级的MUI内置样式（仅紧急场景使用）：

<LoginButton
  variant="contained"
  sx={{
    '&:hover': {
      backgroundColor: 'transparent !important',
      boxShadow: 'none',
    },
  }}
>
  登录
</LoginButton>