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

Question

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

但是，如果我单击选项卡，它将变成这样：

It is the default css style when the tab gets focus.

我已经尝试过这个 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

您必须覆盖: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 2

您的 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 3

提供outline: 0给您的代码。

outline默认情况下，当它们处于活动状态或聚焦时，会出现在许多表单元素上，例如input& 。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;
}