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;}已解决

Answer 2

它是outline而不是border，要隐藏它，您应该使用：

outline:none

完整示例：

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;
             outline:none;
            &:hover {
                color: #17A9A3;
            }
            &:focus{
                outline:none;
            }
        }

单击时，“反应”按钮周围带有蓝色边框

2 个答案: