Example using Compent as Selector

example.js

// In this example, we have a box with subcomponents BoxInner and Prompt. Both are `styled.div`
// In line 5, we are customizing the apperance of BoxInner w/o moving those features in to props
// In line 10, we are applying the hover state to nested elements when the parent is hovered.
const Box = styled.div`
  border: 1px dashed #ccc;
  ${BoxInner} {
    filter: opacity(50%) grayscale(50%);
  }
  &:hover {
    border-color: blue;
    ${BoxInner} {
      filter: opacity(100%) grayscale(0%);
      ${Prompt} {
        opacity: 1;
        height: 1.25rem;
        transition: all .2s ease-in-out;
      }
    }
  }
`;

// While all this can be done with prop passing, it's much more economical to do it this way.

Can you expand on

it's much more economical to do it this way