现在的项目是基于antd了,但又要和之前的UI保持一致,设计师希望还用之前的tabs 标签页的样式,所以就需要在antd Tabs的基础上进行一些样式的修改。如下:
在 antd Tabs type='card'
的基础上进行样式修改
<div className='c-tab-capsule'>
<Tab type='card'>
{children}
</Tab>
</div>
.c-tab-capsule {
.ant-tabs-tab:hover, .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
color: #276BF2;
}
.ant-tabs-card > .ant-tabs-nav::before {
display: none !important;
}
.ant-tabs-card .ant-tabs-tab {
background: transparent;
border-color: transparent;
}
.ant-tabs-card > .ant-tabs-nav .ant-tabs-nav-list {
background: #F5F5F5;
border-radius: 2px;
display: flex;
align-items: center;
}
.ant-tabs-card .ant-tabs-tab-active {
height: 36px;
background: #FFF;
}
.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab:first-child {
margin-left: 2px;
}
}
实现后的样子就是这样的了