Styled-components: How to override more specific selectors in external css?

[olegkalyta]

Hi!
We have considered using styled-components in our app to get rid of custom CSS all over the project.
We use twitter-bootstrap as basic and style our components using styled-components

Here is the our issue: bootstrap overrides our styles, because it has more specific selectors

I see three options how to deal with it and I do not like them all 😄

1. !important
2. write equal long selectors in styled-components.
3. manually remove specific selectors from like .nav > li > a from bootstrap.

Is there a _right_ way to reach it using styled-components?

_UPDATED_
After rereading documentation I have found 4th way:

injectGlobal`
  .navbar-nav>li>a {
    padding-top: 0px;
  }
`

So, again, is there anything better for overriding more precise selectors?

[mxstbr]

Yep! There's a very easy, but slightly hacky, workaround:

const NavBarLink = styled.a`
  &&& {
    color: blue;
  }
`

What that does is it replaces each & with the generated class, so in the end the injected CSS looks like this:

.Kj0YC.Kj0YC.Kj0YC {
  color: blue;
}

This bumps the specificity a bunch, without you having to append !important to every. single. rule. 👌