重设Ant-Design选项卡的活动选项卡底部边框的样式

Question

我一直在研究Ant-Design node_module，尝试更改活动选项卡的默认颜色和默认宽度，但是没有运气。有人知道如何覆盖它吗？

问题是我不知道哪个元素具有边框开头。任何帮助都非常欢迎。

Answer 1

检查https://pro.ant.design/docs/style#Override-the-component-style如何覆盖样式。

也请参考答案 Antd: How to override style of a single instance of a component

要找出自己需要更改的内容，请检查浏览器中的元素。

Answer 2

您需要使用tabBarStyle个道具。 查看文档：{​​{3}}

Answer 3

您可以选择：

.ant-tabs-tab.ant-tabs-tab-active {
  border-bottom: 2px solid #BF2D30 !important;
  z-index: 2;
}

Answer 4

我用这段代码解决了这个问题：

  import './styles.less';

  const [tabIndex, setTabIndex] = useState('0');
  const borderClass = ['redBorder', 'greenBorder', 'blueGreyBorder'];

  <Tabs
      className={`tabs ${borderClass[tabIndex]}`}
      defaultActiveKey={tabIndex}
      onChange={onSetTabIndex}
    >
 // And in the styles.less:
` .tabs {
    margin-top: 17px;
    width: 100%;
 }
 .redBorder{
 .ant-tabs-ink-bar {
    background-color: #e94747;
   }
 }
.greenBorder{
  .ant-tabs-ink-bar {
    background-color: #24ad52;
   }
 }
.blueGreyBorder{
  .ant-tabs-ink-bar {
    background-color: #5b708b;
  }
}`

有了状态我们可以改变类并使用级联css来解决我们的问题