Estoy usando componentes con estilo a través de cdn. Si no anido estilos, mis componentes tienen estilo. Si trato de anidar, ninguno de los estilos tiene efecto.
const AComponent = () => { return ( <StyledComponent> <p>Some Text</p> </StyledComponent> ) } // using this shows a red background color const StyledComponent = styled.div` background-color: red; ` // using this doesn't style anything - not even a red background color const StyledComponent = styled.div` background-color: red; p { color: black; } `Probé con un poco de giro y encontré que el siguiente código funcionaba.
export const StyledComponent = styled.div` background-color: red; & > p { color: green; } `;Aquí está el enlace de apoyo para la explicación https://github.com/styled-components/styled-components/issues/330