如何更改 ant-design 选项卡的默认边框颜色

Posted

技术标签:

【中文标题】如何更改 ant-design 选项卡的默认边框颜色【英文标题】:How to change ant-design Tabs default border color 【发布时间】:2021-06-30 10:23:05 【问题描述】:

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

带有默认边框的标签:

我想要的是这个:

不知何故,我能够做到这一点,但它没有响应,需要更多时间。 它搞砸了手机屏幕等。

...
/* 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:afterleftwidth 的百分比,但这很乏味。

如何以更简单的方式实现这一目标?任何想法?是否有任何 ant design vars 可以与 webpack 或 less 一起使用的标签边框? antd docs 有样式道具吗?感谢您的帮助。

查看代码:codesandbox

【问题讨论】:

你想要这样吗? nimb.ws/r1YwsR @m4n0 我认为可以,我只需要将默认边框颜色更改为黑色 @m4n0 如果你有代码,请发布代码 【参考方案1】:

刚刚尝试覆盖现有边框(使用相同的选择器)似乎可以完成这项工作。

https://codesandbox.io/s/so-change-antd-tabs-default-border-color-forked-tkg3h?file=/index.css

【讨论】:

你的解决方案我觉得不错,我现在去看看【参考方案2】:
.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

输出:

【讨论】:

您的解决方案很简洁。顺便说一句,你想解释一下为什么` .ant-tabs-top > .ant-tabs-nav::before` 只选择top tabs 的边框部分吗?我的css理解不是很好:( 我现在明白你为什么使用选择器before。谢谢

以上是关于如何更改 ant-design 选项卡的默认边框颜色的主要内容,如果未能解决你的问题,请参考以下文章

arcgis版面视图中怎么修改整张地图背景?

navicat使用存储过程查询如何更改查询结果选项卡的 结果1,结果2名称?

如何在引导选项卡上编辑(更改颜色和边框像素)?

如何更改 JTabbedPane 选项卡的形状?

如何更改 TabLayout 选定选项卡的图标颜色?

如何更改特定角度材质选项卡的背景颜色?