覆盖有角度的材料 css -- 为什么 !important 有效

Question

我正在尝试覆盖一些有角度的材料组件的 css。我读到 /deep/ 和 :ng-deep 不再被使用，所以我试图在styles.css中添加一些代码。我唯一能做的就是向类添加新属性，而不是覆盖已经存在的属性。

你能帮我覆盖这个css吗？

---更新--- 所以我设法使用 !important:

更改了填充

我想知道是否有更好的方法来做到这一点，以及它为什么有效？

Answer 1

MDN Web Docs 对 CSS 特性和 !important 在覆盖级联中的作用有很好的解释。请记住， id="" 比 class="" 更具体。

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

来自文档：

<块引用>

一些经验法则：

在考虑 !important 之前总是寻找一种使用特异性的方法

<块引用>

仅在覆盖外部 CSS 的页面特定 CSS 上使用 !important

<块引用>

切勿在站点范围的 CSS 上使用 !important。

<块引用>

不要使用 !important，请考虑：

<块引用>

更好地利用 CSS 级联，使用更具体的规则。

<块引用>

在您选择的元素之前指明一个或多个元素， 规则变得更具体并获得更高的优先级。

恕我直言，您在这里使用 !important 是有效的，因为您正在覆盖“外部”css。

至于样式化 Angular Material Components，当您设置项目时，您使用的是预构建或自定义主题。如果您要进行大量自定义，则可以使用自定义主题。

Angular Material Theming