自從Angular Material 15遷移以來，我們在mat-checkbox定制方面遇到了一些麻煩，這破壞了很多東西。

對于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);
  }
}

結果如下(正常模式、只讀模式和禁用模式具有不同的外觀):

對于角度15°遷移后的相同代碼，我們得到:

我通過改變我們的scss文件做了一些測試，但是因為dom和css已經被改變了，沒有任何東西像以前一樣工作，我迷路了。

尤其是對于不確定的復選框，即使我改變了它，它也會保持Angular材質的背景主題，Angular的index.html中包含的以下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嗎？

預先感謝你的幫助