如何使用React-Bootstrap更改选项卡的颜色

Question

我想改变在react-bootstrap中使用的选项卡的颜色。 但是当我更改样式时，它会影响内容而不是选项卡。我该怎么做？

- Zeeshan

Answer 1

在<Tabs className="myClass">组件上指定一个类。要修改选项卡的颜色，您的CSS代码可能会有点奇怪，但我还没有找到更好的方法来实现这一点。

.myClass ul > li > a {
    background-color: gray;
    color: white;
}

你会注意到这并没有涵盖悬停和非活动状态，所以你还需要做更多的工作，但这应该足以让你朝着正确的方向前进。

在CodePen上的工作示例

- Todd Chaffee

---

这仍然基本上是正确的答案，但截至2020年，这种模式似乎是：.myClass > a {/* 在此添加您的样式 */} - Matt West

对我来说，可行的工作方式是.nav-tabs .nav-item.nav-link.active - 这样活动标签将拥有所需的彩色背景。 - fuser

Answer 2

在React-Bootstrap V5中，对我起作用的CSS代码如下，而无需在<Tabs>元素上指定任何className。

.nav-tabs .nav-link {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

.nav-tabs .nav-link.active {
  border-bottom: solid 4px white !important;
}

- Kareem Abbas

---

!Important是不好的，有没有通过scss实现的方法？ - Phyo Arkar Lwin

Answer 3

在 react-bootstrap v4 中，Tab 组件有一个名为 tabClassName 的属性（https://react-bootstrap-v4.netlify.app/components/tabs/#tab-props）。通过它，您可以传入一个类并定义 CSS，以覆盖默认类：

# in css file:

.coloredTab {
  background-color: red;
}

# in jsx file:
<Tab ... tabClassName={classes.coloredTab} />

虽然我没有检查最新的v5，但它可能会更好。

- Igor Gonak