更改角度材质单选按钮上的 CSS（例如 bgcolor）答案

【问题标题】：Change the CSS (for example bgcolor) on angular material radio button更改角度材质单选按钮上的 CSS（例如 bgcolor）
【发布时间】：2020-06-13 22:50:21
【问题描述】：

我有以下来自角度材料的单选按钮，我想在选择它时应用一些 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>

【问题讨论】：

这是否回答了您的问题？ stackoverflow.com/a/52552578/2358409
不是我想要的，但我只是在那个答案的帮助下想通了

标签： css angular angular-material radio-button focus

【解决方案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;
}

【讨论】：