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, =/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
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
Share Improve this question edited Apr 4, 2021 at 4:54 blueseal asked Apr 4, 2021 at 4:42 bluesealblueseal 2,9187 gold badges28 silver badges43 bronze badges 3- 1 Do you want it like this? nimb.ws/r1YwsR – m4n0 Commented Apr 4, 2021 at 5:14
- @m4n0 I think yes, I just need to change the default border color to black – blueseal Commented Apr 4, 2021 at 5:17
- @m4n0 please post the code if you have it – blueseal Commented Apr 4, 2021 at 5:22
2 Answers
Reset to default 4.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:
CodeSandbox Demo
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
updated antd dependency on 2022-08-24