Javascript 使用样式化组件更改其类列表动态更改的组件的样式

我试图切换组件的类列表，并基于此有条件地更改其样式

我正在做以下工作：

const CalendarEvents = styled.div``;
const Days = styled.div``;

const Calendar = styled.div`
  ~ .show {
    ${CalendarEvents} {
      ${Days} {
        display: none;
      }
    }
  }
`;

我有一个按钮可以切换类

“show”

，但是组件似乎没有改变。单击按钮时，

Days

组件应具有

显示：none

样式

我是否错误地使用了

~

选择器

---

我想您需要使用与

（&）

符号，而不是

~

组合选择器，该选择器需要在主组件

日历

具有

时返回到主组件
。首先显示
类，然后您可以进行嵌套样式

const Calendar = styled.div`
 &.show {
    ${CalendarEvents} {
      ${Days} {
        display: none;
      }
    }
  }
`;

// equal to .Calendar.show > CalendarEvents > Days { ... }

请参阅文档：
我想您需要使用与
（&）
符号，而不是
~
组合选择器，该选择器需要返回到主组件
日历
，当它有
时。首先显示
类，然后您可以进行嵌套样式

const Calendar = styled.div`
 &.show {
    ${CalendarEvents} {
      ${Days} {
        display: none;
      }
    }
  }
`;

// equal to .Calendar.show > CalendarEvents > Days { ... }

见文件：