react bootstrap tabs custom class not working-CodePudding

I use react bootstrap tabs component but when i use a custom css within this nav-link with a custom parent class indicator its not working.

<Tabs
       defaultActiveKey="signup_renter"
       id="uncontrolled-tab-example"
       className="mb-3 approval-details-tab"
     >
     <Tab eventKey="signup_renter" title="About Car">
        <div className="signup-renter">
            this is signup renter tab            
        </div>
     </Tab>
     <Tab eventKey="signup_host" title="Details">
         <div className="signup-host">
            this is signup host tab          
        </div>
     </Tab>
    </Tabs>

Here is my css parent indicator:

.approval-details-tab > .nav-tabs .nav-link.active::before {
  content: "";
  background: #524eb7;
  width: 30px;
  height: 3px;
  position: absolute;
  top: 63% !important;
}

I use .approval-details-tab class as a parent class of nav-tabs but without parent class it works. but i need a parent class for separate design.

CodePudding user response：

From the React-bootstrap documentation:

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included CSS. However, some stylesheet is required to use these components.

How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

CDN link: https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css

Add CDN at index.html file inside tag like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>

Now, to override any class of `react-bootstrap', you have to use "!important" on your custom css. If you want to override the background color, use "!important" beside that css property.

Example:

.approval-details-tab{
   background: #524eb7 !important;
}

To get more clear understanding of your problem, please mention which css-property you want to override of a bootstrap class. Thanks!

CodePudding user response：

In React, the parent-children relationship is a bit complicated. Although a component in React seemed to be the direct child of another component, when translated to normal HTML, it doesn't. For example, take a look at this code

<div className="parent">
    <Tabs className="children"> 
       some other components inside
    </Tabs>
</div>

Does div the direct parent of the component Tabs? It is not. The above code, when being translated to normal HTML component would look roughly like this

<div className="parent">
   <div>
     <div className="children">
       some other components inside
     </div>
   </div>
</div>

As you can see, the element that bears the className children is no longer the direct child of the parent component. That is why in React, it is not a good idea to style components using parent-direct children relationship.

If you just want to do this way of styling because you want to avoid naming conflict, you can try out CSS Module

If you want to read the detail on how the Tabs component behave, you can read the source code