<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>
我的一个组件中有五个选项卡,我只想更改一个选项卡“我的对话”的字体颜色。我尝试向父级和子级添加一个类,但它没有改变颜色。请提出任何解决方案。
您需要将
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;
}
只需将其添加到
<Tab tabClassName='text-light'/>
这里有一些 Bootstrap 颜色:
文本辅助
短信成功
文字危险
文字警告
文字信息
文字灯
文字深色
文字静音
文字-白色`
试试这个代码
<Tab eventKey="myconversation" title="My Conversation" style={{ color: "red" }} >
</Tab>