How do I hide the border around Blueprint.js switch component?

Question

开关组件蓝图（此处为演示和文档）在选择/取消选择时不显示边框。我将这个组件包含在一个 React 组件中，如下所示：

import {Component} from "react";
import {Switch} from "@blueprintjs/core";
import React from "react";

class BPrintMain extends Component{

    render(){
        return (
            <Switch id="switch-input-3" label="Public"  disabled={false} />
        )
    }
}

export {BPrintMain};

当我单击开关组件时，它会显示如下边框：

边框会一直保持，直到失去焦点，也就是我点击了页面上的其他东西。

我包括来自我的主要组件的 css 的 Blueprint css 文件，如下所示：

@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~normalize.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

css 似乎适用于按钮、输入控件等。我缺少什么？为什么开关在焦点上显示焦点/边界框？

Answer 1

好的，我找到了答案。把它留在这里以防其他人被这个咬伤并用我选择的词来表达这个问题。

正如在这个 github 问题中所解释的，这是浏览器的预期行为：显示具有焦点的元素。正如问题中的答案所说，只需将以下两行添加到您的应用程序中（我在 index.js，我的 React 应用程序的根目录中这样做）即可解决问题：

import { FocusStyleManager } from "@blueprintjs/core";
FocusStyleManager.onlyShowFocusOnTabs();