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?

Possible duplicate of [Best way to handle hover in styled-components with react](https://stackoverflow.com/questions/41007060/best-way-to-handle-hover-in-styled-components-with-react) — Chris, Jul 11 '17 at 13:49

score 64 · Accepted Answer · edited Aug 28 '18 at 12:49

64

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.

edited Aug 28 '18 at 12:49

Community

1
1

answered Jul 11 '17 at 15:43

mxstbr

11,087
4
39
37

5

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. – Pietro Nov 09 '17 at 08:41

score 7 · Answer 2 · answered Jul 11 '17 at 14:03

7

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>

answered Jul 11 '17 at 14:03

Tom Berghuis

491
3
10
26

1

Thanks! But I removed all the ids and classes while using styled components – kurumkan Jul 11 '17 at 14:07
well try &:hover > * { background: green; } – Tom Berghuis Jul 11 '17 at 14:10
Thanks any way. Are you going through fcc? – kurumkan Jul 11 '17 at 14:29
@ArslArsl yes, you can see my completed projects on my github – Tom Berghuis Jul 12 '17 at 00:29
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. – Jurosh Feb 03 '19 at 12:42

score 0 · Answer 3 · answered Nov 13 '22 at 10:24

0

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>

answered Nov 13 '22 at 10:24

Ayoub MOUSTAKIM

11
1

1

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](/help/how-to-answer). – Community Nov 16 '22 at 04:13

Styled-Components: specify styles of children on parents hover

Without Styled Components

With Styled Components

3 Answers3

Linked