Target another styled component on hover

As of styled-components v2 you can interpolate other styled components to refer to their automatically generated class names. In your case you’ll probably want to do something like this:

const Wrapper = styled.div`
  &:hover ${Button} {
    display: none;
  }
`

See the documentation for more information!

The order of components is important. It will only work if Button is defined above/before Wrapper.

If you’re using v1 and you need to do this you can work around it by using a custom class name:

const Wrapper = styled.div`
  &:hover .my__unique__button__class-asdf123 {
    display: none;
  }
`

<Wrapper>
  <Button className="my__unique__button__class-asdf123" />
</Wrapper>

Since v2 is a drop-in upgrade from v1 I’d recommend updating, but if that’s not in the cards this is a fine workaround.