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

Posted 2023-02-22

【中文标题】单击时，React 按钮周围有蓝色边框

【英文标题】：React button has blue border around it when clicking

【发布时间】：2020-12-15 00:38:47

【问题描述】：

您好，我正在制作一个带有 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;
            
        

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

【参考方案1】：

只需在您的 css 文件中为 box-shadow 使用以下值：

 button 
    box-shadow: none!important;
 

我希望这会有所帮助。

【参考方案2】：

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

button:focus outline:none;

如果它不起作用，也请使用!important。

--> button:focus box-shadow:none !important; 这个解决了

【讨论】：

感谢您为我指明正确的方向！我不得不放置button:focus box-shadow:none !important; 这解决了它

【参考方案3】：

它是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;
            
        

【讨论】：

感谢您为我指明正确的方向！我不得不放置button:focus box-shadow:none !important; 这解决了它

对于它的价值，如果你可以让它在不使用!important 的情况下工作，那通常是更好的做法。