javascript - Lit 组件中的 Style :host 覆盖 mixin 中的 style :host

Question

当 lit 组件扩展 mixin 时，组件中的样式会覆盖 mixin 中的样式。

例子：

我的组件.js

export class HomePage extends ViewMixin(LitElement) {
  static styles = css`
    :host {
      color: blue;
    }
  `;

视图-mixin.js

export const ViewMixin = superClass => {
  class ViewMixinElement extends superClass {
    static styles = css`
      :host {
         background-color: red;
      }
    `;

该组件将使用 color=blue 进行渲染，但背景不会是红色。如何在为每个视图添加特定的 :host 样式的同时将 background-color=red 添加到所有视图？