[英]How to change ant-design Tabs default border color
I can't change the default border color of antd Tabs .我无法更改 antd Tabs的默认边框颜色。
Tabs with Default border:具有默认边框的选项卡:
somehow, I was able to achieve this but it's not responsive, it takes more time.不知何故,我能够做到这一点,但它没有响应,需要更多时间。 It messed up with the mobile screen, etc.
它搞砸了手机屏幕等。
...
/* 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;
}
This is how it looks on the Mobile screen.这是它在移动屏幕上的外观。 I think I can use many breakpoints for different screen width and change the percentage of
left
and width
in .ant-tabs-content-holder:after
but it's tedious.我想我可以为不同的屏幕宽度使用许多断点,并更改
.ant-tabs-content-holder:after
中left
和width
的百分比,但这很乏味。
How to achieve this in a simpler way?如何以更简单的方式实现这一目标? Any idea?
任何想法? is there any ant design
vars
for tabs border that I can use with webpack or less
?是否有任何用于标签边框的 ant 设计
vars
可以与 webpack 或less
一起使用? antd docs has style props for it? antd docs 有样式道具吗? I will appreciate your help.
我会感谢你的帮助。
Check out code: codesandbox签出代码: codesandbox
.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*/
}
You just need to override the above 4 classes to achieve your layout:您只需要覆盖以上 4 个类即可实现您的布局:
CodeSandbox Demo CodeSandbox 演示
Output: Output:
Just tried overriding existing borders(with same selectors) seems does the job.刚刚尝试覆盖现有边框(使用相同的选择器)似乎可以完成这项工作。
https://codesandbox.io/s/so-change-antd-tabs-default-border-color-forked-tkg3h?file=/index.css https://codesandbox.io/s/so-change-antd-tabs-default-border-color-forked-tkg3h?file=/index.css
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.