I have a query regarding styled components and how they interact when one is referenced within another.
While I've looked at the official documentation with the Link example, I'm still unclear on the exact behavior when one styled component references another.
So my specific question is: in the scenario below - do references ${A}, ${B} apply their styles to the wrapper element? Or do they only modify certain attributes?
What happens behind the scenes in this situation?
For instance:
const A = styled.div`
background-color: red;
margin-top: 10px;
`
const B = styled.div`
background-color: blue;
`
const Wrapper = styled.div`
${A}, ${B} {
background-color: green;
}
`
export const NiceComponent: React.FC = () => {
return (
<Wrapper>
<A />
<B />
</Wrapper>
);