Custom styling in react-tabs seems not working . Bottom border dissaperas as soons as the tab selected

Question

I am using react-tabs (https://github.com/reactjs/react-tabs) for my project. I want to add custom styling on top of that. But the styles seems not working properly

What is expected: Expected output - without issues

What I get screen with the issue

As soon as the tabs change the bottom border goes away. I guess it's because of

.react-tabs__tab:focus { outline: none; }

How can I fix this issue ? This is my current SCSS `

.react-tabs__tab {
    font-family: 'Spoqa Han Sans Neo';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #999999;
}

.react-tabs__tab--selected{
    background: #fff;
    color: black;
    border: 1px solid transparent;
    border-radius: 5px 5px 0 0;
    padding-bottom: 18px;
    border-bottom: 3px solid #075453;
    font-family: 'Spoqa Han Sans Neo';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #333333;
}`

My jsx

import React from 'react';
import { Tabs, TabList, Tab, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
import './membersTabularView.scss';
const MembersTabularView = () => {
    return ( 
            <Tabs  >
                <TabList> 
                    <Tab>1</Tab>
                    <Tab>2</Tab>
                    <Tab>3</Tab>
                </TabList>

                <TabPanel>
                    <h2>Any content 1</h2>
                </TabPanel>
                <TabPanel>
                    <h2>Any content 2</h2>
                </TabPanel>
                <TabPanel>
                    <h2>Any content 3</h2>
                </TabPanel>
            </Tabs> 
    );
};

export default MembersTabularView;

sandbox link https://codesandbox.io/s/lucid-northcutt-3f617h?file=/src/App.js

you need to provide a minimum reproducible working code sample for your query, to get some help. — Praveen, Mar 01 '23 at 04:52
try reproducing your query with something like https://codesandbox.io/s/react-new — Praveen, Mar 01 '23 at 05:39
https://codesandbox.io/s/lucid-northcutt-3f617h?file=/src/App.js — NIKO VITZ, Mar 01 '23 at 14:06

C Ekanayake · Accepted Answer · 2023-03-02T12:43:46.430

If you remove the background colour in the react-tabs__tab--selected class and override the react-tabs_tab:focus: after content property, it should work as intended. The final SCSS class is shown below.

.react-tabs__tab--selected {
      color: black;
      border: 1px solid transparent;
      border-radius: 5px 5px 0 0;
      padding-bottom: 18px;
      border-bottom: 3px solid #075453;
      font-family: "Spoqa Han Sans Neo";
      font-style: normal;
      font-weight: 700;
      font-size: 18px;
      line-height: 24px;
      color: #333333;
    }

 .react-tabs__tab:focus:after{
  content:none
  }

Custom styling in react-tabs seems not working . Bottom border dissaperas as soons as the tab selected

1 Answers1