Material UI Button remove focus frame

Question

Is there a way to remove the focus frame of a Material UI Button?

I tried to add a CSS class .focusframe with box-shadow: none, but this does not seem to remove the focus frame. When clicked, the button remains with this red focus frame.

TypeScript class with the Button rendering:

export class App extends React.Component<AppProps, AppState> {
    public componentDidMount() {
        this.setState({sessionLoaded: true});
    }

    public render() {
        if (this.state) {
            return <div>
                <Button className='focusframe' onClick={() => console.log("Material UI Button clicked!")} color='primary' variant='contained'>Click Me!</Button>
            </div>;
        } else {
            return <div>State not yet accessible.</div>;
        }
    }
}

SCSS Class:

@import "~bootstrap/scss/bootstrap";
@import "_colors.scss";

body {
    background-color: $body-color-base;
    color: $body-color-font;

    .focusframe {
        box-shadow: none;
    }
}

Before clicking the button:

After clicking the button:

Edit 1:

HTML of the button:

<div>
  <button class="MuiButtonBase-root MuiButton-root MuiButton-contained focusframe MuiButton-containedPrimary" tabindex="0" type="button">
    <span class="MuiButton-label">
      Click Me!
    </span>
    <span class="MuiTouchRipple-root">
    </span>
  </button>
</div>

SCSS-file _colors.scss:

$body-color-base: #343a40;
$body-color-font: #dddddd;

Edit 2:

This works if I set it globally:

*:focus {
    outline: none !important;
}

But it doesn't work if I set it to the .focusframe class:

@import "~bootstrap/scss/bootstrap";
@import "_colors.scss";

body {
    background-color: $body-color-base;
    color: $body-color-font;

    .focusframe {
        :focus {
            outline: none;
        }
    }
}

Answer 1

Disable the outline via CSS

*:focus {
    outline: none;
}

based on your edit, your css selector is wrong:

body {
    background-color: $body-color-base;
    color: $body-color-font;

    .focusframe {
        &:focus { <--- & here
            outline: none;
        }
    }
}