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

Question

material-ui 引入了一种使用类名来设置组件样式的方法。我有一个如下所示的按钮组件。它使用createStylesandwithStyles将样式注入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>
  );
};

标签： reactjsmaterial-ui

Answer 1

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

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