I'm using styled-components via cdn. If I do not nest styles, my components are styled. If I try to nest, none of the styles take effect.
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;
}
`
I tried with a bit of twist and found the below code working.
export const StyledComponent = styled.div`
background-color: red;
& > p {
color: green;
}
`;
Here is the supporting link for explanation https://github.com/styled-components/styled-components/issues/330