如何更新material-ui按钮焦点样式？答案

【问题标题】：How to update material-ui button focus style?如何更新material-ui按钮焦点样式？
【发布时间】：2019-10-06 09:04:36
【问题描述】：

material-ui 引入了一种使用类名来设置组件样式的方法。我有一个如下所示的按钮组件。它使用createStyles 和withStyles 将样式作为classes 注入到组件中。但我不知道如何设置Button 的焦点样式。

import Button from '@material-ui/core/Button';

const styles = createStyles({
  button: {
    minHeight: '3rem',
    lineHeight: '3rem',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-around',
    fontSize: '0.8rem',
    fontFamily: 'Roboto',
    color: '#008091',
    border: '2px solid #008091',
    borderRadius: '0.375rem',
    marginRight: '1rem',
    marginTop: '2rem',
    marginBottom: '2rem',
    minWidth: '180px',
    textAlign: 'center',
    fontWeight: 700,
    margin: '1rem 0',
    padding: 0
  },
  selected: {
    backgroundColor: '#008091',
    color: 'white'
  }
});

interface Props {
  classes: { [className in keyof typeof styles]: string };
  style?: React.CSSProperties;
  text: string;
  selected?: boolean;
  onClick: (event: React.MouseEvent<HTMLElement>) => void;
}

const TextButton = ({ classes, style, text, onClick, selected }: Props) => {
  return (
    <Button
      className={selected ? classNames(classes.button, classes.selected) : classes.button}
      style={style}
      onClick={onClick}
    >
      {text}
    </Button>
  );
};

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

可以通过以下方式添加伪选择器：

const styles = createStyles({
  button: {
    // main styles,
    "&:focus": {
      color: "red"
    }
  }
});

【讨论】：

【解决方案2】：

这应该可以解决问题

overrides: {
    MuiButton: {
      root: {
        '&:focus': {
          color: 'rgba(0, 0, 0, 0.87)',
          backgroundColor: 'rgba(0, 0, 0, 0.87)',
        },
      },
    },
  },

【讨论】：

当按钮被点击时我们设置了什么动作？而不是 '&:focus'？