如何使用SCSS动态覆盖父主题，解决子元素样式被父级覆盖问题？

我们后台客服聊天列表条目较多，需为每个聊天项应用对应客户产品的主题配色。由于所有主题类样式均由相同的SCSS混合宏生成，选择器优先级一致，若用户切换的父级主题在样式声明顺序中靠后，会错误覆盖聊天项的主题样式。

styles.scss #

.theme {
  &--pink {
    $primary: mat-palette($vt-primary);
    $accent: mat-palette($mat-pink, A200, A100, A400);
    $theme: mat-light-theme($primary, $accent);

    @include angular-material-theme($theme);
  }

  &--red {
    $primary: mat-palette($vt-primary);
    $accent: mat-palette($mat-red, A200, A100, A400);
    $theme: mat-dark-theme($primary, $accent);
    background: #303030;
    color: white;

    @include angular-material-theme($theme);
  }

  &--orange {
    $primary: mat-palette($vt-primary);
    $accent: mat-palette($mat-orange, A200, A100, A400);
    $theme: mat-dark-theme($primary, $accent);
    background: #303030;
    color: white;

    @include angular-material-theme($theme);
  }

  &--green {
    $primary: mat-palette($vt-primary);
    $accent: mat-palette($mat-green, A200, A100, A400);
    $theme: mat-dark-theme($primary, $accent);
    background: #303030;
    color: white;

    @include angular-material-theme($theme);
  }
}

组件HTML #

<div class="red">
  <ul class="chat-list">
    <li class="theme--pink">
      <mat-icon color="accent">circle</mat-icon>
      Example Chat
    </li>
    <li class="theme--red">
      <mat-icon color="accent">circle</mat-icon>
      Example Chat
    </li>
    <li class="theme--orange">
      <mat-icon color="accent">circle</mat-icon>
      Example Chat
    </li>
    <li class="theme--green">
      <mat-icon color="accent">circle</mat-icon>
      Example Chat
    </li>
  </ul>
</div>

当前示例中，粉色主题的聊天项继承了父级红色主题样式，无法通过调整样式顺序或添加!important解决该问题，因为场景会动态变化。期望聊天图标在父主题变更时仍保持自身主题配色。

曾尝试用TypeScript动态调整样式层叠顺序，但该方案依赖禁用SCSS提取，而最新Angular版本不支持此操作。

内容的提问来源于stack exchange，提问作者Jenson42