Измените переключатель CSS (например, bgcolor) на angular материал

Question

Привет У меня есть следующий переключатель из angular материала, и я хочу применить CSS, когда он был выбран, но CSS не работает, и я не знаю, почему, однако, :hover работает отлично хорошо, я предоставил HTML и CSS не могли бы вы помочь мне с этим?

.things {
  &:focus {
    background-color: red;
  }
  &:hover {
    .thing-name {
      color: #9c27b0;
    }
  }
}

<mat-radio-button class="things" *ngFor="let thing of things" [value]="thing.name">
  <span class="thing-details">
      <img class="thing-image" [src]="thing.logo" [alt]="thing.name" />
      <h4 class="thing-name text-center mt-3 pt-3">{{ thing.name }}</h4>
      </span>
</mat-radio-button>

Answer 1

Я только что понял это. следующий код скрывает окружность переключателя и меняет цвет другого элемента при его выборе

::ng-deep.mat-radio-button.mat-accent.mat-radio-checked {
  span .thing-name {
    border: 1px solid #ffffff !important;
    background-color: #28a745 !important;
  }
}

// the bellow are for deleting the circle from the radio buttons
::ng-deep .mat-radio-button .mat-radio-container {
  width: 0;
}
::ng-deep .mat-radio-container .mat-radio-outer-circle,
::ng-deep .mat-radio-container .mat-radio-inner-circle {
  border: none;
  width: 0;
}