样式组件 styles 在使用道具时被覆盖

Question

I have the following styled components

const Test1 = styled.div`
  // some styles
`;

const Test2 = styled.div`
  background-color: ${({ someProp }) => someProp ? "cyan" : "magenta"};

  ${Test1} > & {
    color: ${({ someProp }) => someProp ? "red" : "green"};
  }
`;

I'm using these components like this

<Test2 someProp>Test2 (bg: cyan, color: black)</Test2>
<Test2>Test2 (bg: magenta, color: black)</Test2>
<Test1>
  <Test2 someProp>Inner Test2 (bg: cyan, color: red)</Test2>
  <Test2>Inner Test2 (bg: magenta, color: green)</Test2>
</Test1>

The HTML output is this

<div class="pages__Test2-doZfs hsqqBA">Test2 (bg: cyan, color: black)</div>
<div class="pages__Test2-doZfs iQIEMM">Test2 (bg: magenta, color: black)</div>
<div class="pages__Test1-ifSjDr">
  <div class="pages__Test2-doZfs hsqqBA">Inner Test2 (bg: cyan, color: red)</div>
  <div class="pages__Test2-doZfs iQIEMM">Inner Test2 (bg: magenta, color: green)</div>
</div>

The styles output that I would expect is this

<style>
  .hsqqBA {
    background-color: cyan;
  }

  .pages__Test1-ifSjDr > .hsqqBA {
    color: red;
  }

  .iQIEMM {
    background-color: magenta;
  }

  .pages__Test1-ifSjDr > .iQIEMM {
    color: green;
  }
</style>

But what I'm actually getting is this

<style>
  .hsqqBA {
    background-color: cyan;
  }

  .pages__Test1-ifSjDr > .pages__Test2-doZfs {
    color: red;
  }

  .iQIEMM {
    background-color: magenta;
  }

  .pages__Test1-ifSjDr > .pages__Test2-doZfs {
    color: green;
  }
</style>

So, this is causing the third Test2 instance to have a color green instead of red.

My question is why does this happen and more importantly what can I do to handle this?

Thanks

Answer 1

Well, after reading online I found that all I needed to do was to use && instead of & when using props within a reference to other components

const Test1 = styled.div`
  // some styles
`;

const Test2 = styled.div`
  background-color: ${({ someProp }) => someProp ? "cyan" : "magenta"};

  ${Test1} > && {
    color: ${({ someProp }) => someProp ? "red" : "green"};
  }
`;