CODEWITHSUNDEEP
cssantd
Austin Callaghan
Austin Callaghan

Reputation: 125

Restyle Ant-Design Tabs active tab bottom border

I've been digging through the Ant-Design node_module trying to change the default color and default width of an active tab but have had no luck. Anyone know how to override it?

The problem is that I don't know which element has the border to begin with. Any help is very welcomed.

Upvotes: 4

Views: 17183

Answers (4)

jailson pacagnan
jailson pacagnan

Reputation: 39

I solve this problem with this code:

  import './styles.less';

  const [tabIndex, setTabIndex] = useState('0');
  const borderClass = ['redBorder', 'greenBorder', 'blueGreyBorder'];

  <Tabs
      className={`tabs ${borderClass[tabIndex]}`}
      defaultActiveKey={tabIndex}
      onChange={onSetTabIndex}
    >
 // And in the styles.less:
` .tabs {
    margin-top: 17px;
    width: 100%;
 }
 .redBorder{
 .ant-tabs-ink-bar {
    background-color: #e94747;
   }
 }
.greenBorder{
  .ant-tabs-ink-bar {
    background-color: #24ad52;
   }
 }
.blueGreyBorder{
  .ant-tabs-ink-bar {
    background-color: #5b708b;
  }
}`

with the state we can change the class and use the cascade css to solve our problem

Upvotes: 0

deni rahma
deni rahma

Reputation: 55

you can go with:

.ant-tabs-tab.ant-tabs-tab-active {
  border-bottom: 2px solid #BF2D30 !important;
  z-index: 2;
}

UPDATE

This style will do as expected.

.ant-tabs-ink-bar {
  height: 5px;
  background: red !important;
}

Upvotes: 5

Dmitry S.
Dmitry S.

Reputation: 4544

You need use tabBarStyle props. See docs: https://ant.design/components/tabs/

Upvotes: 1

Hemanthvrm
Hemanthvrm

Reputation: 2457

Check https://pro.ant.design/docs/style#Override-the-component-style on how to override style .

Refer dis answer too Antd: How to override style of a single instance of a component

To figure out on what needs to be changed on your own, Inspect the element in browser.

Example

Upvotes: 2

Related Questions