css 如何改变Ant Design标签的默认边框颜色

kq4fsx7k 于 2023-05-02 发布在 Ant Design

关注(0)|答案(2)|浏览(358)

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

默认边框标签：

我想要的是：

不知何故，我能够实现这一点，但它没有响应，它需要更多的时间。它搞乱了移动的屏幕等

...
/* 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;
  }

这就是它在移动的屏幕上的样子。我想我可以为不同的屏幕宽度使用许多断点，并改变left和width在.ant-tabs-content-holder:after中的百分比，但这很繁琐。

如何以更简单的方式实现这一点？有什么想法吗？有没有任何Ant Designvars的标签边框，我可以使用webpack或less？antd docs有风格 prop 吗？我将感激你的帮助。
验证码：codesandbox

css

来源：https://stackoverflow.com/questions/66938074/how-to-change-ant-design-tabs-default-border-color

2条答案

按热度按时间

kx5bkwkv1#

.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*/
}

你只需要覆盖上面的4个类来实现你的布局：
CodeSandbox Demo

输出：