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.
Similarly to mxstbr's answer, you can also use interpolation to reference a parent component. I like this route because it encapsulates a component's styling a little better than referencing the child component in the parent.
const Button = styled.button` ${Wrapper}:hover & { display: none; }`;
I couldn't tell you when this feature was introduced but this works as of v3.
Relevant link: https://www.styled-components.com/docs/advanced#referring-to-other-components
My solution is
const Content = styled.div` &:hover + ${ImgPortal} { &:after { opacity: 1; } }`;