Styling React Bootstrap Component in Active State

Question

I'm trying to style a React Bootstrap Navbar. I was able to successfully style the non-active tabs, however, I cannot seems to reach the active tab. My styles live is a separate .scss file. Here's the relevant snippet:

.navitem {
  a {
    font-size: 12px;
    color: #000;
    background-color: #e7e7e7;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-bottom-color: #357ebd;
    border-bottom-style: solid;
    border-radius: 0px !important;
    display: inline-block;
    border-bottom-width: 2px;
  }
  flex: 1;
}

.navitem.active {
  background-color: #777777;
}

When an active Bootstrap component is created, its HTML looks like this:

<li role="presentation" class="Preview-navitem--19fA7 active"><a role="button" href="#">Preview</a></li>

Here's the HTML inside the react render() method:

<Nav
            className={styles.navbar}
            bsStyle="pills"
            activeKey={this.state.value}
            onSelect={this.handleSelect}
          >
            <NavItem className={styles.navitem} eventKey="1">Preview</NavItem>
            {navItem}
</Nav>

So, basically, I can style the .navitem, but not the .active. Any idea how I could accomplish this?

Answer 1

Assuming this is CSS Modules, which it looks like based on the pasted code, the solution is to use global selectors. CSS Modules briefly mentions this on the main README page under Exceptions. However, their webpack demo has a global selector example you can clone and play around with.

In short, you should change:

.navitem.active {
  background-color: #777777;
}

to:

.navitem:global(.active) {
  background-color: #777777;
}

in order for it to be processed properly by Webpack. This should be all that's needed!