Question

我使用Angular Material2。

素材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提醒我）

Answer 2

在角度配置文件中，您需要在具体化样式后导入样式

Answer 3

覆盖其他文件CSS的最佳做法是使其更加具体。这些将无处不在。

这里是一个博客链接，用于详细研究CSS特异性： https://medium.com/@kastor012/the-basic-guide-to-css-specificity-b89726c0c0bc

就像您想在代码上方覆盖您一样

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

然后，您必须将类添加到元素或父级中。并编写指定的CSS以将其覆盖为：

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

OR

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

如何覆盖材质CSS样式？

3 个答案: