Styled-Components: specify styles of children on parents hover

Question

I have a simple component Here are 2 version of it - with and without styled-components:

Without Styled Components

<div id="container">
    <div id="kid"></div>
</div>


#container {
    width: 100px;
    height: 100px;
}

#kid {
    width: 20px;
    height: 20px;
}

#container:hover #kid{
    background: green;
}

With Styled Components

const Container = styled.div`
    width: 100px;
    height: 100px;
`;

const Kid = styled.div`
    width: 20px;
    height: 20px;
`;

<Container>
    <Kid />
</Container

How to implement the same on hover behaviour that was in the previous example?

Lynseylynus

Possible duplicate of Best way to handle hover in styled-components with react – Armed

Possible duplicate – Pugilism

Answer 1

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 Container = styled.div`
  &:hover ${Kid} {
    display: none;
  }
`

See the documentation for more information!

This is copy and pasted from my answer here.

Transmarine

I was looking for this through the documentation and project's issues. Shouldn't it be part of the styledcomponents basic or advanced section instead of faq? Thanks for the good work. – Kaciekacy

its crazy to me how bass-ack-wards this is when we used to just have css descendent selectors before we over engineered our frontends with nonsense – Going

Answer 2

try:

const Container = styled.div`
    width: 100px;
    height: 100px;
    &:hover #kid {
        background: green;
    }
`;

const Kid = styled.div`
    width: 20px;
    height: 20px;
`;

<Container>
    <Kid id="kid" />
</Container>

Deglutinate

Thanks! But I removed all the ids and classes while using styled components – Lynseylynus

well try &:hover > * { background: green; } – Deglutinate

Thanks any way. Are you going through fcc? – Lynseylynus

@ArslArsl yes, you can see my completed projects on my github – Deglutinate

This doesn't look like proper solution. IDs cannot be used with components - there can be only one unique in DOM. And using * will target all elements so once you change structure eg. add one more div in middle, it will stop working - so best to target Kid specifically - like answer above does. – Footbridge

Answer 3

import styled from "styled-components";

const Parent = styled.div`
width: 100%;
height: 100%;
&:hover .btn {
    transform: scale(0.9);
}
`;

const button = styled.div`
width: 20px;
height: 20px;
`;
<Parent>
<button className="btn" />
</Parent>

Xiomaraxiong

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Jackboot