title: How to style button from MUI icon button
body: <p>I am wondering how to apply styles to the Material UI's underlying <code>Button</code> from the <code>IconButton</code>. For example, in order to change the close icon hover/focus color, I need to currently change the <code>:hover</code> and <code>:focus</code> classes. It seems like there should be an easier way of doing this, the the <code>ButtonBase</code> API docs do in fact provide a class for this: <code>focusVisible</code>. However, nothing I have attempted to try successfully applies this styling.</p>
  
  <pre class="lang-js prettyprint-override"><code>const useStyles = makeStyles({
    closeButton: {
      "&amp;:hover": { backgroundColor: "yellow" },
      "&amp;:focus": { backgroundColor: "yellow" }
    }
  });
  
  const classes = useStyles();
  
  return (
    &lt;IconButton classes={{
        root: classes.closeButton,
        // This gives a warning that "focusVisible" class doesn't exist
        //   on IconButton (which is true, it comes from ButtonBase).
        focusVisible: classes.closeButton
      }}
    &gt;
      &lt;Icon&gt;close&lt;/Icon&gt;
    &lt;/IconButton&gt;
  );
  </code></pre>
  
  <p>I can't figure out for the life of me how this should work, as their docs don't mention anything like this that I can find. Any ideas?</p>
  
  <p><a href="https://material-ui.com/api/icon-button/" rel="noreferrer">Icon Button API Docs</a>
  <a href="https://material-ui.com/api/button-base/" rel="noreferrer">Button Base API Docs</a></p>