typescript - Material UI按钮删除焦点框架

Question

有没有一种方法可以删除“ Material 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;
        }
    }
}