title: Material UI Button remove focus frame
body: <p>Is there a way to remove the focus frame of a Material UI Button?</p>
  
  <p>I tried to add a CSS class <code>.focusframe</code> with <code>box-shadow: none</code>, but this does not seem to remove the focus frame. When clicked, the button remains with this red focus frame.</p>
  
  <p>TypeScript class with the Button rendering:</p>
  
  <pre><code>export class App extends React.Component&lt;AppProps, AppState&gt; {
      public componentDidMount() {
          this.setState({sessionLoaded: true});
      }
  
      public render() {
          if (this.state) {
              return &lt;div&gt;
                  &lt;Button className='focusframe' onClick={() =&gt; console.log("Material UI Button clicked!")} color='primary' variant='contained'&gt;Click Me!&lt;/Button&gt;
              &lt;/div&gt;;
          } else {
              return &lt;div&gt;State not yet accessible.&lt;/div&gt;;
          }
      }
  }
  </code></pre>
  
  <p>SCSS Class:</p>
  
  <pre><code>@import "~bootstrap/scss/bootstrap";
  @import "_colors.scss";
  
  body {
      background-color: $body-color-base;
      color: $body-color-font;
  
      .focusframe {
          box-shadow: none;
      }
  }
  </code></pre>
  
  <p>Before clicking the button:</p>
  
  <p><a href="https://i.stack.imgur.com/Kia1h.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Kia1h.png" alt="enter image description here"></a></p>
  
  <p>After clicking the button:</p>
  
  <p><a href="https://i.stack.imgur.com/PTUc6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PTUc6.png" alt="enter image description here"></a></p>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>HTML of the button:</p>
  
  <pre><code>&lt;div&gt;
    &lt;button class="MuiButtonBase-root MuiButton-root MuiButton-contained focusframe MuiButton-containedPrimary" tabindex="0" type="button"&gt;
      &lt;span class="MuiButton-label"&gt;
        Click Me!
      &lt;/span&gt;
      &lt;span class="MuiTouchRipple-root"&gt;
      &lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SCSS-file _colors.scss:</p>
  
  <pre><code>$body-color-base: #343a40;
  $body-color-font: #dddddd;
  </code></pre>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>This works if I set it globally:</p>
  
  <pre><code>*:focus {
      outline: none !important;
  }
  </code></pre>
  
  <p>But it doesn't work if I set it to the <code>.focusframe</code> class:</p>
  
  <pre><code>@import "~bootstrap/scss/bootstrap";
  @import "_colors.scss";
  
  body {
      background-color: $body-color-base;
      color: $body-color-font;
  
      .focusframe {
          :focus {
              outline: none;
          }
      }
  }
  </code></pre>