title: How to always apply focusVisible styling on a focused Material-UI Button component?
body: <p>For a Material-UI Button component, I would like to have the &quot;focus&quot; styling look the same as &quot;focusVisible&quot; styling. Meaning I want it to have the same ripple effect visible if the button was focused programatically or with the mouse as if the button was focused with the tab key.</p>
  <p>A sort-of workaround I have found is to call <code>dispatchEvent(new window.Event(&quot;keydown&quot;))</code> on the element before it is focused, causing keyboard to be the last input type used. This will have the effect of making the button look the way I want UNTIL the onMouseLeave event (from MUI &lt;ButtonBase/&gt;) or another mouse event is fired, causing the visible focus to disappear.</p>
  <p>I have figured out how to change the focus styling of the component like this:</p>
  <pre><code>import React from &quot;react&quot;
  import { withStyles } from &quot;@material-ui/core/styles&quot;
  import Button from &quot;@material-ui/core/Button&quot;
  
  const styles = {
    root: {
      '&amp;:focus': {
        border: &quot;3px solid #000000&quot;
      }
    }
  }
  
  const CustomButtonRaw = React.forwardRef((props, ref) =&gt; {
    const { classes, ...rest } = props
    return &lt;Button classes={{root: classes.root}} {...rest} ref={ref}/&gt;
  }
  
  const CustomButton = withStyles(styles, { name: &quot;CustomButton&quot; })(CustomButtonRaw)
  
  export default CustomButton
  </code></pre>
  <p>So, I can apply some style to the button when it is in &quot;focus&quot; state. (For ex. I applied a border). But I am missing how to get the styles to apply. I have tried putting the className 'Mui-visibleFocus' on the Button but that did not seem to have an effect. Is there some way to get the styles that would be applied if the Button was in visibleFocus state?</p>