使用样式化组件来更改具有动态更改其classList的组件的样式

Question

我正在尝试切换组件的classList，并根据此条件有条件地更改其样式。

我正在执行以下操作：

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

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

我有一个用于切换类'show'的按钮，但是组件似乎没有变化。单击按钮后，Days组件应具有display: none样式。

我是否错误地使用了~选择器？

Answer 1

我想您需要使用＆符号(&)而不是~组合选择器，该选择器需要先返回到主要组件Calendar，然后再使用.show类，然后再使用您可以进行嵌套样式。

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

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

查看文档：{​​{3}}