嵌套 styles 忽略样式组件的样式

Question

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;
  }
`

Answer 1

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