Styles for referenced component with props are not applied

[uc-artur]

Hi!

I tried to reference a component with props to add/overwrite some values but it only works if the referenced component has no props, with props the style is not applied consistently. I expected all wrapped components to have lightgreen background with a border, but that is not the case:

const ComponentWithProps = styled("div")`
  width: ${({w}) => (w || 100)}px;
  background: lightgrey;
`;

const WrapperWithReference = styled("div")`
  ${ComponentWithProps} {
    background: lightgreen;
    border: 1px solid black;
  }
`;

const App = () => {
  return (
    <WrapperWithReference>
      <ComponentWithProps w={100}>expecting lightgreen bg with border</ComponentWithProps>
      <ComponentWithProps w={110}>expecting lightgreen bg with border</ComponentWithProps>
    </WrapperWithReference>
  );
};

https://codesandbox.io/s/silent-lake-is6e2g?file=/src/App.js

Am I missing something?