angular - 如何覆盖 Material CSS 样式？

Question

我使用 Angular Material 2。

Material CSS 中有一种 CSS 样式:

.mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: #fff;
}

我尝试在自定义 CSS 文件中覆盖它，例如:

.mat-radio-button.mat-accent .mat-radio-inner-circle {   background-color: red !important; }

我也尝试过这个:

/deep/ .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: red !important;
}

它不起作用，如何正确执行此操作以及在哪里执行此操作？

Answer 1

您可以在全局样式表 (style.scss) 或任何未封装的样式表中执行此操作。

要覆盖，请通过检查浏览器中的 HTML 元素来获取选择器，然后覆盖所需的属性。

如果仍然失败，可以使用!important强制应用样式。

记住也要在 angular.json 文件中订购样式表导入(感谢 @SurenSrapyan 提醒我)