reactjs - 我如何自定义 antd tab active 底部标签栏的颜色

标签 reactjs antd

我想更改与标签标题相同的底部标签栏颜色。试了好几种方法都没成功。

我的代码:

export default function OurPhilosophy() {

 return (
     <Container maxWidth="lg" className="our-philosophy">
         <h3 className="heading1">Our Philosophy</h3>

         <Demo />
     </Container>
 )
} 

const Demo = () => (
 <Tabs defaultActiveKey="1" size="large">
     <TabPane tab="Heading 1" key="1">
         "Content"
     </TabPane>
     <TabPane tab="Heading 2" key="2">
         "Content"
     </TabPane>
     <TabPane tab="Heading 3" key="3">
         "Content"
     </TabPane>
     <TabPane tab="Heading 4" key="4">
         "Content"
     </TabPane>
 </Tabs>
);

屏幕:

enter image description here

最佳答案

问题已解决

这是CSS

.ant-tabs-ink-bar {
    border-bottom: 2px solid #FF5230;
}

关于reactjs - 我如何自定义 antd tab active 底部标签栏的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63463701/

相关文章:

reactjs - 如何扩展 React 类型以支持 html 属性作为 Prop ?

javascript - 使用 useEffect 钩子(Hook)获取后,ReactJS 上下文重新渲染

reactjs - 使用 enzyme 测试使用 React.useEffect 的组件

javascript - 如何使用 redux 将联系人添加到我的联系人状态对象?

reactjs - Ant 设计输入组件不更新值

reactjs - 在一个组件中使用多个模态表单

javascript - 如何在 React 中调用堆栈中的导航事件?

javascript - 失败的 prop 类型 : Invalid prop `rowSelection` of type `function` supplied to `Table` , 预期 `object`

javascript - 如何将修改后的 prop 发送到 redux store?

reactjs - Antd Forms,从自定义组件获取值?