Javascript 如何更改ant设计选项卡的默认边框颜色

我无法更改antd的默认边框颜色

带有默认边框的选项卡：

我想要的是：

不知何故，我能够做到这一点，但它没有反应，这需要更多的时间。 它弄乱了手机屏幕等等

...
/* rest of css in codesandbox, https://codesandbox.io/s/so-change-antd-tabs-default-border-color-40gmb?file=/index.css */
...

  .ant-tabs-content-holder {
    border-width: 1px;
    border-color: grey;
    border-style: solid;
    padding: 1rem;
    background: white;
    position: relative;
  }

 .ant-tabs-content-holder:after {
    padding: 0;
    margin: 0;
    display: block;
    content: '';
    height: 1.1px;
    position: absolute;
    top: -1px;

    left:  0%;
    width: 24.8%;
    background-color: white;
  }

这就是它在手机屏幕上的外观。我想我可以为不同的屏幕宽度使用许多断点，并在

中更改
左
和
宽度
的百分比。ant tabs content holder:after

但这很乏味

如何以更简单的方式实现这一点？有什么想法吗？对于选项卡边框是否有任何ant设计

vars

，我可以与webpack或

less

一起使用？antd docs有样式道具吗？我将感谢你的帮助

---

签出代码：

刚刚尝试覆盖现有边框（使用相同的选择器）似乎可以完成此任务

您只需覆盖上述4个类即可实现布局：

输出：

---

您想要这样的吗@m4n0我想是的，我只需要将默认边框颜色更改为black@m4n0请张贴代码，如果你有你的解决方案看起来不错，我现在要检查它你的解决方案是整洁的。顺便说一句，你能解释一下为什么`.ant tabs top>.ant tabs nav:：before`只选择顶部选项卡右边的边框部分？我对css的理解不是很好：（我现在明白为什么您以前使用选择器

。

。谢谢

.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab { /* For tabs border */
  border-color: black;
}

.ant-tabs-top > .ant-tabs-nav::before { /* For the line to the right and close to the tabs */
  border-color: black;
}

.ant-tabs > .ant-tabs-nav { /* So that there is no gap between the content and tabs */
  margin-bottom: 0;
}

.ant-tabs-content-holder {
  padding: 15px;
  border: 1px solid black; /* Border for the content part */
  border-top: transparent; /* Remove the top border so that there is no overlap*/
}