CODEWITHSUNDEEP
javascriptcssreactjsantdant-design-pro
blueseal
blueseal

Reputation: 2908

How to change ant-design Tabs default border color

I can't change the default border color of antd Tabs.

Tabs with Default border: tabs-default-color

What I want is this: tabs-black-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.

not-responsive-small-screen

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

Upvotes: 2

Views: 10357

Answers (2)

Ravikumar
Ravikumar

Reputation: 2205

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

Upvotes: 2

m4n0
m4n0

Reputation: 32255

.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:

enter image description here

Upvotes: 4

Related Questions