我该如何反应-bootstrap 更改选项卡的颜色

Question

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

Answer 1

在 <Tabs className="myClass"> 组件上指定 class。要修改选项卡的颜色，您的 CSS 看起来会有点老套，但我还没有找到更好的方法来做到这一点：

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

您会注意到这不包括悬停和非活动状态，因此您需要做更多的工作，但这应该足以让您朝着正确的方向前进。

Working example at CodePen

Answer 2

在 react-bootstrap v4 中，Tab 组件有一个名为 tabClassName (https://react-bootstrap-v4.netlify.app/components/tabs/#tab-props) 的属性。在它的帮助下，您可以传入 class 并定义 CSS，这将覆盖默认的 classes:

# in css file:

.coloredTab {
  background-color: red;
}

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

虽然没有检查最新的 v5。甚至可能会变得更好。

Answer 3

在 React-Bootstrap V5 中对我有用的是下面的 CSS 代码，没有在 <Tabs> 元素上指定任何类名。

.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;
}

我该如何反应-bootstrap 更改选项卡的颜色

how can I react-bootstrap change the color of the tabs

reactjs

react-bootstrap