我如何自定义antd标签活动底部标签栏颜色

时间:2020-08-18 07:23:34

标签: 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

1 个答案:

答案 0 :(得分:1)

问题已解决

这是CSS

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