编辑 Angular 材质表单元格填充答案

【问题标题】：Editing Angular Material's Table Cell Padding编辑 Angular 材质表单元格填充
【发布时间】：2018-11-15 11:42:39
【问题描述】：

当我使用开发人员工具检查元素时，它显示零填充，但是当我查看它并将鼠标悬停在它上面时，它非常清楚地在单元格内具有填充。我不知道这是从哪里来的，并且设置 td { padding: 0 !important } 什么都不做。

【问题讨论】：

【解决方案1】：

感知到的填充是由默认浏览器/用户代理<td> 样式中的display: table-cell; 和vertical-align: inherit;（通常是值middle）结合height 上设置的@ 引起的987654328@。带有 CSS 类 .mat-row 的 <tr> 默认设置高度为 48px。您可以调整高度或设置为height: auto;，然后根据需要将填充调整为td.mat-cell。这有效地消除了使用开发人员工具检查时可见的可感知填充。在检查 <td> 时，在 Chrome 开发人员工具之类的东西中看到的绿色填充可视化是在工具中显示带有表格单元格的中间垂直对齐元素的方式。如果您检查该 <td> 的计算机属性，您会发现它的四个边都为零填充。

.mat-row {
  height: auto;
}

.mat-cell {
  padding: 8px 8px 8px 0;
}

这是一个StackBlitz，显示tr.mat-row 上的height: auto; 以及td.mat-cell 上的自定义填充值。

虽然我建议避免更改td.mat-cell 上的display 属性值，但您可以将其更改为inline-block 之类的值，无需对height 的mat-row 进行任何调整即可查看效果。

【讨论】：

这仅适用于我在填充上使用!important，因为 mat-table 的代码显然直接写入了<style> 块。
@Steve，这取决于您将样式放在哪里。如果您使用styleUrls，就像答案中的示例一样，组件CSS样式在组件视图中为encapsulated，并且不需要！important标签，因为创建了table[_ngcontent-c6]等选择器。如果您使用的是全局 CSS，您可能需要增加特异性或使用 !important，如您所提到的。
是的，我们正在努力避免组件样式，并为使用 Angular Material 的人提供一个全局 css 文件（因为我们公司的大多数人都使用 Bootstrap）。