I have a straightforward element There are two variations of it - one using styled-components and the other without:
No Styled Components
<div id="box">
<div id="inner-box"></div>
</div>
#box {
width: 100px;
height: 100px;
}
#inner-box {
width: 20px;
height: 20px;
}
#box:hover #inner-box{
background: green;
}
Using Styled Components
const Box = styled.div`
width: 100px;
height: 100px;
`;
const InnerBox = styled.div`
width: 20px;
height: 20px;
`;
<Box>
<InnerBox />
</Box
How can I achieve the same hover effect as in the previous example when using styled components?