Having trouble with applying a custom class to React Bootstrap tabs?

When utilizing the react bootstrap tabs component, I encountered an issue with implementing a custom CSS style for the nav-link element within it using a customized parent class indicator.

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

Below is the CSS code for the parent indicator:

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

The problem arises when I use the .approval-details-tab as the parent class of nav-tabs, causing the custom styling to not work. However, the styling applies without using a parent class. Unfortunately, I require a parent class for distinctive design purposes.

cssreactjsbootstrap-4tabsreact-bootstrap

Answer №1

According to the information provided in the React-bootstrap documentation:

The React-Bootstrap library does not rely on a specific version of Bootstrap and therefore does not come with any built-in CSS. However, some stylesheet is necessary to utilize these components.

It is left to your discretion how and which Bootstrap styles you decide to include, but the easiest approach is to incorporate the most up-to-date styles from the CDN.

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

Insert the CDN link in the index.html file within the <head> tag as shown below:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3835352e292e283b2a1a6f746b7469">[email protected]</a>/dist/css/bootstrap.min.css"/>

To override any class from `react-bootstrap', you must apply "!important" in your custom CSS. If you wish to change the background color, add "!important" next to that particular CSS property.

For example:

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

In order for us to provide more targeted assistance, kindly specify which CSS property you intend to modify within a bootstrap class. Thank you!

Answer №2

In React, understanding the parent-child relationship can be a bit complex. While a component in React may appear to be the direct child of another component, this is not always the case when translated to normal HTML. Consider the following code:

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

Is the `div` element the direct parent of the Tabs component? Not quite. When this code is rendered as normal HTML, it would look something like this:

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

Notice how the element with the className children is no longer a direct child of the parent component. This is why styling components based on parent-direct children relationship is not recommended in React.

If you are considering this approach for styling due to naming conflicts, you may want to explore using CSS Modules instead.

To further understand the behavior of the Tabs component, you can examine the source code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps do I need to take to ensure the CSS hover effect functions properly?

After conducting a simple test underneath the main divs, I found that it works as intended. However, the primary one is not functioning properly. I attempted to apply the class "services-icon" to the div containing the image, but it still did not work. I ...

htmlcss

When attempting to retry in Next.js, the props obtained from getServerSideProps may

Currently, I am facing an issue with sending axios requests in getServerSideProps and passing the value through props via SSR to the client. The challenge lies in including a token in the header using an instance. In case the token expires, I utilize refre ...

javascriptreactjsnext.js

Tips for transferring data to index.html from Fetch API

Trying to transfer data from an API to my website has been a challenging task. The structure of my directories is as follows: project > server.js | public public > index.html | styles.css A snippet of my code in server.js shows the process: ...

htmlnode.jsreactjsexpress

Error: null does not have the property 'renderView' to be read

My goal is to set up a main page in React.js with two buttons: Option 1 and Option 2. Clicking on Option 1 should redirect the user to the Main1 page, while clicking on Option 2 should lead them to Main2. It seems straightforward, but I am encountering the ...

javascriptreactjsmaterial-ui

Programmatically extracting a list of utilized CSS images from IE WebBrowser (IHTMLDocument2)

Exploring the IHTMLStyleSheetsCollection, IHTMLStyleSheet, IHTMLStyleSheetRulesCollection etc. of IHTMLDocument2 to compile a list of all styles in the current document is quite simple. Does anyone have any suggestions on how to generate a list of only th ...

htmlcsstwebbrowser

Does React Native have a picker similar to this?

[I struggled to find a way to combine an icon and text in the placeholder and label of items] (https://i.sstatic.net/TzOxe.jpg) ...

reactjsreact-nativenative

Guide on accessing a local image while setting the background image using JavaScript

I am trying to set a background image from a local source on my computer. Below are two lines of code, one that works and one that does not: (the local one fails) _html.style.backgroundImage = 'url("urlsourceblahblahblah")'; _html.style.backgro ...

javascripthtmlcssangularjsimage

Eliminate the dimming background on a discussion thread in Discourse

Working on customizing a theme for my blog using the Discourse engine has been quite interesting. I have noticed that every post, or "topic," loads with a blue background that quickly transitions to the main background color. You can take a look at an exam ...

csssassdiscourse

Using a component as a route in Next.js: A step-by-step guide

I am interested in creating a feature that resembles the popups on Facebook, where dynamic content such as images and text are displayed. When clicking on an item, I would like a popup to appear with a URL structure similar to /post/343542. Currently, I h ...

reactjsreact-routernext.js

Utilize the useState hook to update state when changes occur in the

I currently have a functional component that utilizes a useState hook. The values it holds are sourced from my redux store, and I aim to update the state with the new store state every time an action is dispatched. At the moment, I've manually set an ...

javascriptreactjstypescriptredux

I constantly encounter the error message "Unable to access properties of undefined (reading 'map')"

I am in the process of using Nextjs 13 for developing my front end and I have a requirement to fetch a .json file from a URL and utilize it to populate my website through server side rendering. However, I keep encountering an error saying "Cannot read prop ...

javascriptreactjsnext.js

Creating HTML code using PHP to display two tables next to each other

My goal is to display two tables side by side in an HTML table, each ordered by a different column. I attempted this using the following code: <tbody> <td> <?php require_once "db_data.php"; $bids_results = $mysqli-& ...

phphtmlcss

Transitioning to webpack 5: Encountering an error - Unable to access the 'prototype' property of an undefined value

After spending several days attempting to fix this bug, none of the solutions I found online have been helpful. The issue arose after migrating from webpack version 4 to version 5. Here is the specific error that's occurring: https://i.stack.imgur.co ...

node.jsreactjswebpackstreammigration

Delaying CSS Keyframe animations

I'm having trouble getting the color squares in my table to appear one by one. I want each color to show up, then disappear, followed by the next color appearing and disappearing, creating a light sequence effect. Any advice or assistance would be gre ...

htmlcss

When the properties change, React Router Redux does not get rendered

I am encountering a challenge with using react router redux, where everything seems to be working well except for rendering when props change. Index.js import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} fro ...

javascriptreactjsreact-routerreact-router-redux

Can the current website navigation be integrated into the blog script?

People might see me as a spoil sport for not using Wordpress, but I prefer a flatfile blog system for my small site. Currently, I am using the ozjournals-3.2 blog system. I need assistance in installing a header and site navigation on top of the blog page ...

cssheadernavigationblogs

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow. The code snippet I experimented with: <div class="one"> &l ...

javascriptjqueryhtmlcss

What is the proper way to showcase thumbnails in different sizes?

Currently, this is what I have: https://i.sstatic.net/VOC2z.png The display looks optimal with high-resolution landscape photos. This is the HTML and CSS code in use: <div class="upload-thumb ng-scope visible"> <span class="delete-media"&g ...

javascripthtmlcss

In React Native, the concept of "null" does not exist within component state as an

I'm currently working on integrating the react-native-modal-datetime-picker functionality into my application Code Snippet: import React, { Component } from "react"; import { View, ScrollView, DatePickerIOS, TouchableOpa ...

reactjsreact-nativenpm

Typescript enums causing Safari to display blank screen in Next.js

The website performs well on Chrome and Edge, but encounters difficulties on Safari for iOS. Although all the elements, styling, and scripts load properly, nothing appears on the screen. After spending countless hours debugging, I discovered that the pro ...

reactjstypescriptsafarinext.jsyarn-workspaces