更改角度材料数据表的CSS样式

Question

我正在使用mdDataTable来显示从Server检索到的数据。是否有可能更改mdt-row的css类？如果我尝试添加一个类，mdDatatable会覆盖它

Answer 1

在你自己的css文件中，你可以通过显式地定位角度md类来覆盖css，如下所示：

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

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

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

另请注意，请确保在角度css文件之后加载了您的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;
      }