在 angular material 单选按钮上更改 CSS（例如 bgcolor）

Question

我有来自 angular material 的以下单选按钮，我想在选择它时应用一些 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;
}

在 angular material 单选按钮上更改 CSS（例如 bgcolor）

Change the CSS (for example bgcolor) on angular material radio button

css

focus

radio-button

angular-material

angular