Angular Material 15迁移后如何自定义mat-checkbox全状态只读样式？

问题背景 #

迁移至Angular Material 15后，原有Angular 14中自定义mat-checkbox只读、禁用状态样式的CSS代码完全失效，尤其是indeterminate（半选）状态的复选框背景仍保留默认主题样式。

Angular 14 时期的自定义样式代码 #

之前在style.css中编写的代码如下，可实现正常、只读、禁用状态的差异化样式：

// mat-checkbox
mat-checkbox {
  @mixin updateCheckbox($color) {
    .mat-checkbox-frame {
      border-color: $color !important;
    }

    .mat-checkbox-checkmark-path {
      stroke: $color !important;
    }

    .mat-checkbox-mixedmark {
      background-color: $color;
    }
  }

  label {
    color: $black-color;
  }

  .mat-ripple-element {
    background-color: $green-color !important;
  }

  &.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
  &.mdc-checkbox--selected.mat-accent .mat-checkbox-background {
    background-color: transparent;
  }

  @include updateCheckbox($black-color);

  &[readonly] {
    @include updateCheckbox($readonly-color);
    .mat-ripple-element {
      background-color: $readonly-color !important;
    }
  }

  &[disabled] {
    @include updateCheckbox($disabled-color);
  }
}

迁移至Angular 15后的问题 #

核心原因是Angular自动注入的CSS优先级更高，尤其是针对半选和选中状态的背景与边框样式，直接覆盖了自定义代码：

.mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background, .mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background, .mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background {
    border-color: var(--mdc-checkbox-selected-icon-color, var(--mdc-theme-secondary, #018786));
    background-color: var(--mdc-checkbox-selected-icon-color, var(--mdc-theme-secondary, #018786));
}

需求目标 #

希望实现与Angular 14完全一致的效果：

• 正常状态：黑边框、黑勾选标记
• 只读状态：深灰边框、深灰勾选标记
• 禁用状态：浅灰边框、浅灰勾选标记
  同时想确认是否可以通过修改CSS变量--mdc-checkbox-selected-icon-color来实现自定义。

已尝试的不理想方案 #

通过覆盖mat-checkbox的CSS变量实现，但勾选标记的宽度计算方式改变，效果不符合预期：

.mat-mdc-checkbox.mat-accent {
  --mdc-checkbox-selected-checkmark-color: $black-color;
  --mdc-checkbox-selected-hover-icon-color: transparent;
  --mdc-checkbox-selected-icon-color: transparent;
  --mdc-checkbox-selected-pressed-icon-color: transparent;
  --mdc-checkbox-disabled-selected-checkmark-color: rgba(0, 0, 0, 0.18);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(0, 0, 0, 0.38);
  --mdc-checkbox-disabled-selected-icon-color: transparent;
}

.mat-mdc-checkbox.mat-accent {
  &[readonly] {
    --mdc-checkbox-selected-checkmark-color: $readonly-color;
  }
}

mat-checkbox {
  @mixin updateCheckbox($color) {
    // 复选框边框
    .mdc-checkbox__background {
      border-color: $color !important;
    }
    // 复选框勾选标记
    .mdc-checkbox__checkmark-path {
      stroke: $color !important;
    }

    .mdc-checkbox__mixedmark {
      color: $color;
    }
  }

  .mat-ripple-element {
    background-color: transparent;
  }

  label {
    color: $black-color;
  }

  @include updateCheckbox($black-color);

  &[readonly] {
    @include updateCheckbox($readonly-color);
  }

  &[disabled] {
    @include updateCheckbox($disabled-color);
  }
}

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