Как обновить стиль фокуса кнопки материала? - PullRequest
Новая
       6

Как обновить стиль фокуса кнопки материала?

1 голос
/ 20 мая 2019

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>
  );
};

1 Ответ

0 голосов
/ 21 мая 2019

Селекторы Psuedo могут быть добавлены: 

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