如何正确自定义Button组件颜色并解决鼠标悬停样式异常问题？

嘿，这问题我之前也碰到过！原因很简单：你只覆盖了按钮默认状态的背景色，但Material-UI的Floating Action Button（FAB）在hover、focus、active这些交互状态下，有单独的样式规则，这些规则优先级比你写的root样式更高，所以hover时就变回默认浅灰色了。

正确的解决方案：覆盖所有交互状态的样式 #

你需要在自定义的root类里，通过CSS伪类（:hover、:focus、:active）来覆盖对应状态的背景色，和Material-UI处理primary颜色的逻辑保持一致。

方法1：使用makeStyles（函数组件推荐）

import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';

const useStyles = makeStyles({
  customFab: {
    // 默认状态的自定义背景色
    backgroundColor: 'rgb(44, 152, 240)',
    // hover时的颜色，比默认暗一点，和primary的交互逻辑对齐
    '&:hover': {
      backgroundColor: 'rgb(30, 120, 200)',
      // 如果需要保留阴影变化，别加boxShadow: 'none'
    },
    // 可选：覆盖focus和active状态的样式
    '&:focus': {
      backgroundColor: 'rgb(30, 120, 200)',
    },
    '&:active': {
      backgroundColor: 'rgb(20, 100, 180)',
    },
  },
});

function FloatingActionButtons() {
  const classes = useStyles();
  return (
    <Button variant="fab" classes={{ root: classes.customFab }}>
      <Icon style={{ fontSize: 34 }}>play_arrow</Icon>
    </Button>
  );
}

方法2：使用withStyles（类组件或旧项目场景）

如果你用的是高阶组件的方式，代码调整如下：

import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';

const styles = {
  customFab: {
    backgroundColor: 'rgb(44, 152, 240)',
    '&:hover': {
      backgroundColor: 'rgb(30, 120, 200)',
    },
  },
};

function FloatingActionButtons(props) {
  const { classes } = props;
  return (
    <Button variant="fab" classes={{ root: classes.customFab }}>
      <Icon style={{ fontSize: 34 }}>play_arrow</Icon>
    </Button>
  );
}

export default withStyles(styles)(FloatingActionButtons);

补充说明 #

• 注意你原来的rgba(44, 152, 240)少了透明度参数，建议写成rgb(44, 152, 240)（不透明）或者完整的rgba(44, 152, 240, 1)，避免意外的透明度问题。
• 当你设置color="primary"时，Material-UI的主题系统已经帮你预定义了所有状态的颜色变化，所以hover时会自动变暗；自定义颜色时就需要手动处理这些状态样式，才能和原生组件的交互体验保持一致。

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