如何禁用td.mat-cell:last-of-type默认右内边距，自定义SCSS不生效如何解决

问题根因 #

你看到的padding-right: 24px是Angular Material组件库自带的默认表格样式，你写的td.mat-cell选择器优先级低于组件库自带的td.mat-cell:last-of-type伪类选择器，所以自定义样式无法覆盖默认规则。

可落地解决方案 #

• 优先选择：匹配对应伪类提高选择器优先级
  直接针对:last-of-type伪类编写覆盖规则，也可以给外层表格加上自定义类进一步提高优先级，避免影响其他页面的表格：

  td.mat-cell,
  td.mat-cell:last-of-type {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* 加自定义父类限定范围，优先级更高 */
  .custom-page-table td.mat-cell,
  .custom-page-table td.mat-cell:last-of-type {
    padding-left: 0;
    padding-right: 0;
  }
  

• 组件私有样式场景：穿透视图封装
  如果你是在组件单独的scss文件中写的样式，Angular默认的视图封装会阻止样式作用于内部嵌套的第三方组件，可配合::ng-deep穿透，加:host限定仅作用于当前组件，避免污染全局样式：

  :host ::ng-deep td.mat-cell,
  :host ::ng-deep td.mat-cell:last-of-type {
    padding-left: 0;
    padding-right: 0;
  }
  

• 全局覆盖场景：写在全局样式文件
  如果需要全局移除该默认样式，把规则写到项目根目录的全局styles.scss文件中即可，极端情况可加!important强制生效，不推荐频繁使用!important：

  td.mat-cell:last-of-type {
    padding-right: 0 !important;
  }
  

内容的提问来源于stack exchange，提问作者baronming