单击时，React 按钮周围有蓝色边框

Question

嗨，我正在制作一个带有 React 的项目，我注意到，使用我制作和设计的一些按钮，当单击它时，它们有时会出现看起来很奇怪的蓝色边框。我试图通过设置border:none !important甚至尝试覆盖它的颜色来摆脱它，但我似乎无法摆脱它。我只是使用 scss 进行样式设置并且也已经react-bootstrap安装了。

这是具有蓝色边框的按钮的示例：

按钮代码

// button 1

<button type="button" className="btn employee-button" value={employee} key={employee.id} onClick={(e) => this.onEmployeeClick(employee)}>
          <div  className={this.state.startId === employee.id ? "selected employee-card" : "employee-card"}>
            <Gravatar email={employee.email} className="employee-gravatar" />
            <div>
               <p className="employee-name">{employee.firstname} {employee.lastname}</p>
               <p className="employee-job">{employee.jobTitle}</p>
              </div>
           </div>
</button>

// button 2

  <button className="btn" onClick={this.openPopUp}>Create new client</button>

造型

// button 1
        .employee-button {

            .employee-card {
                display: flex;
                flex-direction: row;
                background-color: $white;
                width: 250px;
                height: 70px;
                padding: 10px;
                border-radius: 10px;
                margin-left: 15px;
                

                .employee-gravatar {
                    border-radius: 5px;

                }

                div {
                    margin-top: 10px;
                    width: 80%;
                    margin-top: 0;
                    display: flex;
                    flex-direction: column;
                    font-size: 0.9em;
                    .employee-name{
                        font-weight:600;
                    }
                    .employee-job{
                        font-weight:500;
                        margin-top:-10px;
                    }
                }
                &:hover {
                    color:#E27D60;
                     box-shadow: 0px 18px 40px -12px rgba(182, 181, 181, 0.356);
                }
            }
        }
// button 2
button {
            width: 200px;
            height: 50px;
            color: $black;
            font-size: .9em;
            margin: 45px 0px;
            padding: 12px;
            background-color: $plain-white;
            font-weight: 700;
            border-radius: 5px;
  
            &:hover {
                color: #17A9A3;
            }
        }

我希望有人能帮助我解决这个问题，因为这让我很紧张

Answer 1

您需要为按钮设置焦点轮廓：

button:focus {outline:none;}

如果不起作用!important也可以使用。

-->button:focus {box-shadow:none !important;}这解决了它