Material UI Button 移除焦点框

Question

有没有办法移除 Material UI 按钮的焦点框？

我尝试添加一个CSS类.focusframe有box-shadow: none，但是这似乎并没有删除对焦框。单击时，该按钮将保留此红色焦点框。

带有按钮渲染的 TypeScript 类：

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 类：

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

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

    .focusframe {
        box-shadow: none;
    }
}

点击按钮前：

点击按钮后：

编辑1：

按钮的 HTML：

<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 文件 _colors.scss：

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

编辑2：

如果我全局设置它，这会起作用：

*:focus {
    outline: none !important;
}

但是如果我将它设置为.focusframe类，它就不起作用：

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

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

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

Answer 1

通过 CSS禁用大纲

*:focus {
    outline: none;
}

根据您的编辑，您的 css 选择器是错误的：

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

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