When trying to change the style of a styled-components element upon hovering over another element, I'm running into an issue where the changes are not being applied.
The relevant code snippet is as follows:
const Logo = styled.div`
. . .
&:hover {
color: red;
${TextStyled} {
display: flex;
}
}
`;
Although the color of the Logo component successfully updates to red on hover, the display property of the TextStyled component does not seem to be affected.
I have attempted using a tilde before ${TextStyled}, but that selector did not work either.
In addition, applying the style through the parent Main component also proved to be unsuccessful:
const Main = styled.div`
height: 100vh;
width: 100vw;
background: #000;
${Logo} {
&:hover {
color: red;
${TextStyled} {
display: flex;
}
}
}
`;
https://codesandbox.io/s/cool-grass-2x1ob?file=/src/Component.js