How to use 'not' pseudo-class in styled components

Question

I want to apply styling to all divs that are not children of 'thirdParty' container. To do this, I expected this to work:

const GlobalStyle = createGlobalStyle`
  div{
    &:not(.thirdParty *) {
       ...styles...
    }
  }
`

But this causes the style to not be applied anywhere. I tried div:not(.thirdParty *) as well, but no luck. I'm sure it's just a silly syntax issue, but I can't find any reference to help me (it doesn't help that googling "styled components not" lists results from "not working")

For what it's worth, I achieved what I want by doing:

div {
  width: 42px;
}
.thirdPartyContainer div {
  width: revert;
}

But I don't like it and want a better way, if one exists.

Answer 1

Try this. Need correct selector. You can see example below.

const Container = styled.div`
  div:not(.thirdParty) * {
    background-color: red;
  }
`;

const App = () => (
  <Container>
    <div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
    <div className="thirdParty">
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
    <div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
  </Container>
);