Utilizing React Bootstrap with TypeScript for Styling Active NavItem with Inline CSS

Is it possible to change the background color of the active NavItem element to green using inline CSS in React Bootstrap and React Router Dom? I am currently using TypeScript 2.2 and React. If not, should I create a CSS class instead?

Here is the code snippet:

const tabStyle: React.CSSProperties = {
    backgroundColor: 'green'
}

return (
    <main>
        <div>
            <Nav bsStyle="tabs" activeKey="1">
                <LinkContainer to="/about">
                    <NavItem eventKey="1">About</NavItem>
                </LinkContainer>
                <LinkContainer to="/facts">
                    <NavItem eventKey="2">Facts</NavItem>
                </LinkContainer>
            </Nav>
        </div>
    </main>
);

Answer №1

It appears that the props are not being utilized and remember, props are immutable. Consider exploring the use of state instead and assign the backGroundColor accordingly. For inline styling, you could implement something like this:

 <div style={{color: condition ? "red": "green"}}> </div>

UPDATE: It seems that there is no specific styling set for the NavItem. Refer to this link. You may need to apply CSS for that, for example, Change the <a> element class in react-bootstrap NavItem

Answer №2

Here is the solution I came up with, not the most elegant but it does the job.

const customCss = `
    .route-list .nav-tabs>li.active>a {
        background-color: green;
        color: white;
    }
`

<main>
    <div className="route-list">
        <style>{customCss}</style>
        <Nav bsStyle="tabs" activeKey="1">
            <LinkContainer to="/about">
                <NavItem eventKey="1">About</NavItem>
            </LinkContainer>
            <LinkContainer to="/facts">
                <NavItem eventKey="2">Facts</NavItem>
            </LinkContainer>
        </Nav>
    </div>
</main>

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 is the best method for efficiently loading SVG icons on an HTML page without redundancy? / Is utilizing <use href> recommended?

My struggle with implementing icons in Angular While working on a new Angular project, I've encountered challenges with my current SVG-icon implementation method from a previous project (@ngneat/svg-icon). The process involves organizing SVG files in ...

The icon is not being displayed when the onHover event on the Material UI component is triggered

I am currently working on adding a delete icon to a Material UI MenuItem component. I've created a state field within the component's state called isHovering, which is initially set to false. The goal is to display the delete icon when hovering o ...

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

Exploring creative ways to personalize the underline appearance of material-ui TextField Input

I'm currently utilizing Material-ui within my React project. One thing I'm trying to accomplish is customizing the color of the underline that appears when a user clicks on the Mui <TextField> component. This underline effect is achieved t ...

I'm looking to implement a feature in my notes application built with the MERN stack using Mongoose for MongoDB that allows users to add hidden notes. How

I am looking to implement a hidden notes functionality in my web application. When the "hide note" button is clicked, I want the note to be removed from its current location and added to a hidden notes section. Users should then have the ability to view an ...

Animating elements within Firefox can sometimes cause adjacent elements to shift positions

Currently, I am working on a single-page website that utilizes keyboard-controlled scrolling. To achieve the desired scroll effect, I have developed a JavaScript function that animates divs. Here is the JavaScript code: var current_page = "#first"; func ...

Issue with Ant-design Modal not closing when a prop is passed to control its behavior

In a separate component, I have a Modal called TestModal set up like this: <Modal title="title" centered={true} visible={this.props.isOpen} okText="Close" onOk={this.props.onClose} > Test </Modal> Th ...

Is it possible to use a TypeScript Angular (click) event with an object property as the value?

Seeking assistance in creating a dynamic error card featuring various error messages along with a retry button. Below is a snippet from my TypeScript object: errorCard: any = []; if(error) { this.errorCard.errorMessage = "Oops, please try again"; ...

"Enhance your ClojureScript application with the powerful combination of React with addons and Bootstrap

In my app, I want to incorporate both react-with-addons to enable CSS transitions (as per https://facebook.github.io/react/docs/animation.html) and bootstrap-cljs for utilizing Bootstrap components. However, when I invoke a bootstrap function in my code, ...

The positioning attribute and flexible height in CSS are essential for creating dynamic

My goal is to create a layout with 3 DIVs inside a container, similar to table rows. top {height = 100px} / middle {height = dynamic} / bottom {height = 100px} I am trying to figure out the best approach to make the height of the middle div dynamic whi ...

Tips for displaying a title within the border of a div

We have a client who is asking for a unique feature on their new website - they want the title to appear within the border of a text area. We need help figuring out how to achieve this using CSS/HTML. Take a look at the effect we are trying to create: htt ...

Applying CSS selectors to target child elements within a select option

I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc). <select name="options[81]" id="select_81" class="required ...

What are the steps to troubleshoot CSS issues in NextJS?

Currently, I am encountering challenges while trying to integrate markdown with CSS. The problem I am facing has been replicated in the link provided: https://codesandbox.io/s/react-quilljsbasic-forked-3rcxw?file=/src/App.js ...

After integrating React-Bootstrap, the npm start command fails to function

Encountering an issue with React js. After installing Bootstrap using npm, the project failed to run in the browser with the npm start command. I was following the React-Bootstrap documentation at Below is the error that is being generated: sh: react-sc ...

In React-router-dom version 5, match.params.id functions properly, but it experiences issues in version 6

Can anyone help me figure out the proper way to achieve this functionality in react-router version 6? When I use console.log with match, it returns undefined, even though it works fine in v5. import React from 'react' const NotePage = ({ match } ...

Changing CSS image properties: A step-by-step guide

I've come across a strange conflict between Twitter Bootstrap (2.2.1) and Ad-Gallery in Internet Explorer. It seems that certain lines in bootstrap.min.css are causing issues, preventing images from displaying: img{max-width:100%;width:auto\9;h ...

Did not adhere to regulations

Currently, I am in the process of developing a React app. However, when I attempt to initiate my project using npm start in the terminal, I encounter an error message on the browser. https://i.stack.imgur.com/wej1W.jpg Furthermore, I also receive an erro ...

"Is there a way to extract a value from a JSON object using

I have an object with the following key-value pairs: { 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier': '918312asdasc812', 'http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name': 'Login1&a ...

How to Place a Button Halfway Out of an Angular 5 Material Dialog

Is there a way to place a close button on the top right corner of a dialog box, partially inside and outside the dialog like shown in this image: I attempted using absolute positioning to achieve this, but that solution is not ideal. I want to position t ...

Improved with TypeScript 4.1: Fixed-Size String Literal Type

The latest updates from the TypeScript team have shown significant improvements in string literal typing (4.1 & 4.2). I'm curious if there's a way to define a fixed length string. For example: type LambdaServicePrefix = 'my-application- ...