Question

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

Answer 1

这应该可以解决问题

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

Answer 2

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

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

如何更新Material-UI按钮的焦点样式？

2 个答案: