重新设计 Ant-Design 选项卡的活动选项卡底部边框答案

【问题标题】：Restyle Ant-Design Tabs active tab bottom border重新设计 Ant-Design 选项卡的活动选项卡底部边框
【发布时间】：2021-06-22 19:49:24
【问题描述】：

我一直在研究 Ant-Design 节点模块，试图更改活动选项卡的默认颜色和默认宽度，但没有成功。任何人都知道如何覆盖它？

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

【问题讨论】：

标签： css antd

【解决方案1】：

你可以选择：

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

更新

这种风格会按预期进行。

.ant-tabs-ink-bar {
  height: 5px;
  background: red !important;
}

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。
是的，为什么我们放border-bottom？它将替换原来的antd样式，我们应该添加z-index: 2将我们自定义的样式放在原来的样式前面

【解决方案2】：

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

也参考dis回答 Antd: How to override style of a single instance of a component

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

【讨论】：

【解决方案3】：

你需要使用tabBarStyle 道具。参见文档：https://ant.design/components/tabs/

【讨论】：

【解决方案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来解决我们的问题

【讨论】：