Overwriting nested styles in React Bootstrap using Styled-Components

I typically wouldn't apply styled-components directly to each react-bootstrap components, but instead create a single one to wrap the entire component scope and rely more on CSS classes to get things done.

For example in your case, I would do something like:

const StyledWrap = styled.div`
  & .nav-tabs > .active > li {
    background: white;
  }

  & .nav-tabs > .active.colorize > li {
    background: orange;
  }
`
const MyCustomNavbar = (props) => {
  return (
    <StyledWrap>
      /* ... */
        <NavItem active={true} />
        <NavItem className="colorize"/>
        <NavItem active={true} className="colorize" />
      /* ... */
    </StyledWrap>
  )
}

In my opinion, its a cleaner pattern that keeps your component specific CSS properly scoped, concentrated and comprehensive.

Generally, I find that applying styled-components only once per component scope keeps things simple and manageable. When you apply it in multiple places you end up doing a lot of prefixing and end up with code that looks like this:

<StyledNavbar>
  <StyledNav>
    <StyledNavItem active={true} />
    <StyledNavDropdown>
      <StyledMenuItem eventKey={1.1}>Action 1</StyledMenuItem>
      <StyledMenuItem eventKey={1.2}>Action 2</StyledMenuItem>
    </StyledNavDropdown>
  </StyledNav>
</StyledNavbar>

This is an extreme example, but you get the idea.