CODEWITHSUNDEEP
cssreactjswebpackreact-bootstrap
Megan McPherson
Megan McPherson

Reputation: 185

Changing the text color of a react-bootstrap Navbar using webpack

I'm trying to customize the colors of a react-bootstrap Navbar.

This is the contents of my NavbarComponent.cs file:

var React = require('react');
var ReactDOM = require('react-dom');

import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import Button from 'react-bootstrap/lib/Button';
import styles from './Navbar.css'

export default class NavigationBar extends React.Component {

  render() {
    return (
      <Navbar brand="react-bootstrap" className={styles.navbar}>
        <Nav bsStyle="tabs" activeKey="1" onSelect=    {this.handleSelect}>
          <NavItem className={styles.navitem} eventKey={1} href="#">Thing 1</NavItem>
          <NavItem className={styles.navitem} eventKey={2} href="#">Thing 2</NavItem>
        </Nav>
      </Navbar>
    );
  }
}

and this is my css override file, Navbar.css:

:local(.navbar) {
  background:#2E5F91;
  color:white !important;
}

:local(.navitem) {
  color:white !important;
}

The background color of the Navbar changes just fine, but I can't get the text color to change, even using the !important tag (which is dangerous, I know).

Looking at the elements in the resulting page:

<li role="presentation" class="BV2R0XKa1lLedUhy9CO2p" data-reactid=".1.1.0.0.$/=10">
  <a href="#" role="button" data-reactid=".1.1.0.0.$/=10.0">Thing 1</a>
</li>

it looks like my class isn't getting deep enough. How can I fix this?

Upvotes: 3

Views: 31330

Answers (4)

Vincent Taing
Vincent Taing

Reputation: 3334

I am not familiar with the css pseudo-class :local, I am curious why not use usual css class ?

.navItem {
  color: white;
}

I think the component NavItem does not have a className property (source : https://react-bootstrap.github.io/components.html#navs-props-navitem)

So maybe that's why it doesn't work, not sure though... I would have done it like this :

<NavItem eventKey={2} href="#">
  <span className="navItem">Thing 2</span>
</NavItem>

Here's a jsfiddle: http://jsfiddle.net/u4g5x93w/1/

Upvotes: 0

Mourad Labrahmi
Mourad Labrahmi

Reputation: 1

.navbar-nav .nav-item a {
  color: white !important;
}

Upvotes: 0

ashish bindra
ashish bindra

Reputation: 59

<Navbar collapseOnSelect expand="lg" bg="light" variant="light" >

Upvotes: 0

Pawan Bhusal
Pawan Bhusal

Reputation: 131

you can solve this problem by putting

<link rel="stylesheet" href="../Navbar.css">

to the index.html in your project. And also give specific path for Navbar.css in your index.html. then edit what you like.

Upvotes: 0

Related Questions