时间戳

首页 > 解决方案 > 如何隐藏 Blueprint.js 开关组件周围的边框？

javascript - 如何隐藏 Blueprint.js 开关组件周围的边框？

问题描述

切换组件蓝图（此处为演示和文档）在选择/取消选择时不显示边框。我将此组件包含在 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};

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

带边界框的开关

带边界框的开关

边框一直保持，直到失去焦点，即我点击页面上的其他内容。

我将主要组件的 css 中的 Blueprint css 文件包括在内，如下所示：

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

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

标签： javascriptreactjs

解决方案

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

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

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

推荐阅读