覆盖 Angular Material 组件答案

【问题标题】：Overriding Angular Material components覆盖 Angular Material 组件
【发布时间】：2022-01-13 15:35:48
【问题描述】：

我正在尝试改写字体系列的样式，因此在此过程中我可以轻松改写文本字体，但我无法改写 Angular Material 组件，例如输入文本、mat-table、mat-header , mat-cell, mat-row 等。所以我的问题是我怎样才能超越这些？

谢谢

【问题讨论】：

您的问题很笼统，所以很难回答。但是您是否尝试过使用!important 覆盖样式？例如color: red !important;
是的，但对于那些样式，它不会被覆盖。

标签： angular angular-material-7

【解决方案1】：

尝试以这种形式，在 HTML 的 scss 文件中使用材料组件（例如，对于

:host ::ng-deep {

  label {
    display: block;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #9296a5 !important;
    line-height: 17px !important;
    font-family: "Roboto" !important;
    margin-bottom: 0.2rem !important;
  }

  .index-text-input {
    max-width: 100%;
  }

  .mat-table {
    background:red;
  }

  .mat-cell-input {
    background:blue;
  }

}

这只是一个例子。您必须选择元素并检查 html 中角材料给出的名称，以便了解您必须用于覆盖特定元素的确切名称。

【讨论】：

【解决方案2】：

您可以通过应用不同的排版来全局执行此操作。官方文档here 的指南中详细记录了所有内容。

【讨论】：