Target another styled component on hover

Question

What is the best way to handle hovers in styled-components. I have a wrapping element that when hovered will reveal a button.

I could implement some state on the com

Answer 1

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