使用道具时覆盖样式化组件样式答案

【问题标题】：Styled components styles overridden when using props使用道具时覆盖样式化组件样式
【发布时间】：2021-08-24 22:38:22
【问题描述】：

我有以下样式的组件

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

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

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

我正在像这样使用这些组件

<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>

HTML 输出是这样的

<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>

我期望的样式输出是这样的

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

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

  .iQIEMM {
    background-color: magenta;
  }

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

但我实际上得到的是这个

<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>

因此，这导致第三个 Test2 实例的颜色为绿色而不是红色。

我的问题是为什么会发生这种情况，更重要的是我能做些什么来处理这个问题？

谢谢

【问题讨论】：

标签： javascript html css reactjs styled-components

【解决方案1】：

好吧，在网上阅读后，我发现我需要做的就是在引用其他组件时使用&&而不是&

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

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

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

【讨论】：