title: How to update material-ui button focus style?
body: <p>material-ui introduces a way of using classname for styling component. I have a button component shown as below. It uses <code>createStyles</code> and <code>withStyles</code> to inject the styles as <code>classes</code> into the component. But I don't know how to set the focus style of the <code>Button</code>. </p>
  
  <pre><code>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&lt;HTMLElement&gt;) =&gt; void;
  }
  
  const TextButton = ({ classes, style, text, onClick, selected }: Props) =&gt; {
    return (
      &lt;Button
        className={selected ? classNames(classes.button, classes.selected) : classes.button}
        style={style}
        onClick={onClick}
      &gt;
        {text}
      &lt;/Button&gt;
    );
  };
  </code></pre>