如何覆盖react-tab的默认焦点css样式？

Question

我正在使用react-tab创建一个像这样的界面

但是，如果我点击标签，它将变为：

当标签获得焦点时，它是默认的css样式。

我已经尝试过这个css（少）但它无法覆盖默认样式：

.react-tabs [role=tab],
.react-tabs [role=tablist],
.react-tabs [role=tab]:focus,
.react-tabs [role=tablist]:focus, {
  border-top: none ;
  border-left: none ;
  border-right: none;
  border-bottom: 2px solid #ddd;
}

如何覆盖css样式？

另外，有没有什么可以让上面的css更简洁？我希望能够将[role=tab]和[role=tablist]合并到一个选择器中。

修改的

标签的html标记

Answer 1

您的CSS中存在语法错误：必须删除.react-tabs [role=tablist]:focus, /* <-- */中的最后一个逗号。

演示

.react-tabs {
  height: 20px;
}

.react-tabs [role=tab]  { background: orange; } /* correct version */
.react-tabs [role=tab], { background: blue; } /* won't work */

<div class="react-tabs">
  <div class="something" role="tab">Want to change this guy</div>
</div>

Answer 2

您必须覆盖:focus和:focus:after的所有默认属性。

以下代码对我有用：

  .react-tabs [role=tab]:focus {
    box-shadow: none;
    border-color: none;
    border-bottom-color: $yourColor;
    outline: none;
  }

  .react-tabs [role=tab]:focus:after{
    content: "";
    position: absolute;
    height: 5px;
    left: -4px;
    right: -4px;
    bottom: -5px;
    background: transparent; 
  }

Answer 3

为您的代码提供outline: 0。

outline默认显示在许多表单元素上，例如input＆amp; button，当他们活跃或专注时。所以你必须手动让它消失。

  

大纲在以下方面与边界不同：

     

  
• 大纲不占用空间，它们被绘制在内容之上。
  
• 轮廓可以是非矩形的。它们在Gecko / Firefox中是矩形的。但是例如Opera在周围绘制非矩形形状   建筑。
  

参考代码：

.react-tabs [role=tab],
.react-tabs [role=tablist],
.react-tabs [role=tab]:focus,
.react-tabs [role=tablist]:focus, {
  border-top: none ;
  border-left: none ;
  border-right: none;
  border-bottom: 2px solid #ddd;
  outline: 0 !important;
}