更改 Angular Material 数据 Table 的 css 样式

Question

我正在使用 mdDataTable 显示从服务器检索的数据。是否有可能更改 css class 或 mdt-row？如果我尝试添加 class，mdDatatable 会覆盖它

Answer 1

在您自己的 css 文件中，您可以通过显式指定 angular md 类来覆盖 css，如下所示：

.mdt-row {
  {overridesettingname}: {newsetting};
}

但我会小心，因为这会覆盖整个站点。您可以通过定位页面上的父元素来仅覆盖单个页面，例如：

.{mypageclassname} .mdt-row {
  {overridesettingname}: {newsetting};
}

另外请注意，请确保您的 css 文件在 angular css 文件之后加载。

Answer 2

您可以在开发人员工具中探索元素的类和 id，为所有元素添加样式很容易，这里我添加了示例样式，您可以根据需要继续添加。希望对你有帮助。

 .mat-table {
        overflow: auto;
        max-height: 700px;
      }

 .mat-header-cell .mat-sort-header-sorted {
        color: #0A0A0A;
      }

 md-pagination-wrapper {
        width:auto !important;
    }

 md-row:nth-child(even){
      background-color:#EDF1F5;
      }

 md-row:nth-child(odd){
      background-color:#FDFDFB;
      }

更改 Angular Material 数据 Table 的 css 样式

Change css style of Angular Material Data Table

angularjs

angular-material