CSS in reactJS application does not apply text color

Question

I am making use of navbar in my reactJS application. I use it to place a dynamic string to the right of the menu icon. I created a className to control the color of the text string and to limit the length of the string (since it is dynamic and I dont want it scrolling or running into the menu icon). I am able to limit the length in my new className but for some reason, the text color is not being applied. When I launch the application and make use of the developer tools, I look at the elements to see what css is being applied. I noticed that in the definition of my custom className, the text attribute has a line through it. So, for some reason, the browser has decided to not apply the color attribute. Here is a screen print of the page which shows the classNames that are in play here.

This is the HTML code that is executing:

<div className="planNameandMenu">
    <nav className="navbar navbar-light">
        <a className="navbar-brand jrsClass" href="#">{this.state.planName}</a>
            <button className="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span className="navbar-toggler-icon"></span>
             </button>
         {this.renderMenu()}
     </nav>
 </div>

These are my custom classes:

.planNameandMenu {
    background-color: #3B5796;
}

.jrsClass {
    max-width: 225px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFFFFF;
}

Thanks.

The problem here seems to be the specifity of the CSS: .navbar-light .navbar-brand has a higher specifity than .jrsClass. — Alvaro
– Alvaro, Commented Aug 13, 2019 at 11:59
your navbar imported from library ? or it's your implementation from scratch ? — Kareem Dabbeet
– Kareem Dabbeet, Commented Aug 13, 2019 at 12:01
Important Side Note after you implementing one of the solutions: make sure that your importing your custom styles after importing 3rd party libraries styles. to make sure your css will override it — Kareem Dabbeet
– Kareem Dabbeet, Commented Aug 13, 2019 at 12:12

Etin · Accepted Answer · 2019-08-13 12:04:02Z

3

The problem is the specificity of your rules as noted by @Alvaro in the comments.

Two options:

Target .navbar-light .navbar-brand

    .navbar-light .navbar-brand {
        color: #ffffff;
    }

Add 'important' to .jrsClass

      .jrsClass {
        max-width: 225px;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #FFFFFF !important;
      }

answered Aug 13, 2019 at 12:04

Etin

3651 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonathan Small Over a year ago

Thank you so much. Adding !important was the easiest fix!

Edhar Dowbak Over a year ago

The important will fix this bug but it's not a good practice. Try to use ".navbar-light .jrsClass". This will give for your class higher priority

mgarcia · Accepted Answer · 2019-08-13 12:03:31Z

1

In the picture you attach you can see that another color rule is being applied through CSS:

.navbar-light .navbar-brand {
    color: rgba(0,0,0,.9);
}

This selector has a specificity value higher than .jrsClass. That is why your style is not being applied.

You can set the rules for your class with the selector:

.navbar-light .navbar-brand.jrsClass {
    max-width: 225px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFFFFF;
}

so that your color rule is applied.

answered Aug 13, 2019 at 12:03

mgarcia

6,3763 gold badges23 silver badges43 bronze badges

Collectives™ on Stack Overflow

CSS in reactJS application does not apply text color

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related