如何在 react-bootstrap 中更改我的 5 個選項卡之一的顏色？

Question

<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>

我在其中一個組件中有五個選項卡，我只想更改一個選項卡“我的對話”的字體顏色。 我嘗試將 class 同時添加到父級和子級，但它沒有改變顏色。 請提出任何解決方案。

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

Answer 2

試試這個代碼

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