66
rated 0 times
[
68]
[
2]
/ answers: 1 / hits: 5706
/ 3 Years ago, sun, april 4, 2021, 12:00:00
I can't change the default border color of antd Tabs.
Tabs with Default border:
What I want is this:
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.
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? antd docs has style props for it? I will appreciate your help.
Check out code: codesandbox
More From » css
