CODEWITHSUNDEEP
cssreactjsstyled-components
kurumkan
kurumkan

Reputation: 2725

Styled-Components: specify styles of children on parents hover

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?

Upvotes: 38

Views: 85902

Answers (3)

Ayoub MOUSTAKIM
Ayoub MOUSTAKIM

Reputation: 11

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>

Upvotes: 0

mxstbr
mxstbr

Reputation: 11477

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.

Upvotes: 66

Tom Berghuis
Tom Berghuis

Reputation: 571

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>

Upvotes: 7

Related Questions