如何在 react-bootstrap 中更改我的 5 个选项卡之一的颜色？答案

【问题标题】：How to change the color of one of my 5 tabs in react-bootstrap?如何在 react-bootstrap 中更改我的 5 个选项卡之一的颜色？
【发布时间】：2020-03-15 19:49:18
【问题描述】：

<Tabs defaultActiveKey="recent" >
  <Tab eventKey="recent" title="Recent">
  </Tab>
  <Tab eventKey="popular" title="Popular">
  </Tab>
  <Tab eventKey="all" title="All">
  </Tab>
  <Tab eventKey="category" title="Category">
  </Tab>
  <Tab eventKey="myconversation" title="My Conversation" >
  </Tab>
</Tabs>

我在其中一个组件中有五个选项卡，我只想更改一个选项卡“我的对话”的字体颜色。我尝试为父级和子级添加一个类，但它没有改变颜色。请提出任何解决方案。

【问题讨论】：

标签： javascript css reactjs frontend react-bootstrap

【解决方案1】：

您需要将tabClassname 添加到<Tab /> 组件中，如下所示：

<Tab tabClassName="color-red" eventKey="profile" title="Profile">
  Tab Profile content
</Tab>

还有一点 CSS 样式：

.color-red {
  color: red;
}

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active.color-red {
  color: green;
}

【讨论】：

【解决方案2】：

试试这个代码

<Tab eventKey="myconversation" title="My Conversation" style={{ color: "red" }} >
  </Tab>

【讨论】：