如何修改React+Material-UI中Button组件点击时的背景色？

嘿，我来帮你搞定这个问题！你现在用的是Material-UI v1（也就是next版本）的Button组件，默认点击时的背景色（激活状态）是黄色，要修改它的话，核心是在自定义样式里针对按钮的**激活状态（:active伪类）**来覆盖样式，具体操作如下：

方法：通过withStyles自定义样式覆盖激活状态 #

假设你是用withStyles高阶组件来管理组件样式的，只需要在你的button类里添加:active伪类的背景色设置就行：

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

const styles = theme => ({
  button: {
    // 保留你原来的其他样式设置
    '&:active': {
      backgroundColor: '#1976d2', // 这里替换成你想要的颜色，比如主题色或者自定义色值
      // 也可以用Material-UI的主题变量，比如theme.palette.secondary.dark
    },
  },
  label: {
    // 你的label样式
  },
});

function CustomButton(props) {
  const { classes } = props;
  return (
    <Button
      classes={{ root: classes.button, label: classes.label }}
      variant="raised"
      color="primary"
    >
      点击测试
    </Button>
  );
}

export default withStyles(styles)(CustomButton);

为什么这么做？ #

Material-UI的Button组件是通过CSS伪类:active来控制点击激活状态的背景色的，默认的黄色是primary主题色对应的激活态高亮色。通过在自定义的button类里覆盖这个伪类的样式，就能替换掉默认的黄色背景。

如果想要全局修改所有primary按钮的激活状态颜色，也可以通过自定义Material-UI主题来实现，但如果只是针对单个按钮调整，上面的局部样式覆盖方法更灵活。

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