材质UI按钮删除焦点框架

Question

是否可以删除“材质UI”按钮的焦点框？

我尝试使用.focusframe添加CSS类box-shadow: none，但这似乎并没有消除焦点框。单击后，按钮将保留此红色焦点框。

具有Button呈现的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禁用outline

*:focus {
    outline: none;
}

根据您的修改，您的CSS选择器有误：

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

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