如何调整Angular Material mat-table宽度？CSS设置无效问题

问题描述 #

我有一个Angular Material的mat-table，代码如下：

<mat-table [dataSource]="ds">
  ...
</mat-table>

想要缩小表格显示宽度，尝试在组件CSS中添加以下代码但无效：

.mat-table {
    width: 50%;
}

通过Chrome开发者工具发现，实际控制宽度的是外层mat-card的样式，对应元素：

<mat-card _ngcontent-vna-c44="" class="mat-mdc-card mdc-card">..</mat-card>

其CSS为：

mat-card[_ngcontent-vna-c44] {
    max-width: 80%;
    margin: 2em auto;
    text-align: center;
}

在开发者工具中修改该max-width可实现宽度调整，但本地CSS中写以下代码仍无效：

.mat-card {
    max-width: 50%;
}

原因分析 #

Angular默认开启组件样式封装，组件内的CSS会被添加专属的属性选择器（比如_ngcontent-vna-c44），导致你写的.mat-card选择器无法匹配到带有Angular专属属性的mat-card元素，样式无法生效。

解决方法 #

方法1：使用::ng-deep穿透样式封装 #

在组件CSS中使用::ng-deep强制穿透样式隔离，让样式作用到目标mat-card：

::ng-deep .mat-card {
    max-width: 50%;
}

注意：::ng-deep是Angular的废弃语法，但目前仍能正常使用，后续可能会被替代，使用时需留意官方更新。

方法2：将样式放到全局样式文件 #

把mat-card的样式添加到项目根目录的styles.css（或styles.scss）中，全局样式不受组件封装限制：

.mat-card {
    max-width: 50%;
}

如果只想针对当前页面的mat-card生效，可以给mat-card添加自定义类，再在全局样式中指定：

<!-- 给mat-card添加自定义类 -->
<mat-card class="custom-table-card">
  <mat-table [dataSource]="ds">...</mat-table>
</mat-card>

/* 全局styles.css中 */
.custom-table-card {
    max-width: 50%;
}

方法3：关闭当前组件的样式封装 #

在组件装饰器中设置encapsulation: ViewEncapsulation.None，关闭当前组件的样式隔离，这样组件内的CSS会变成全局样式：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class YourComponentComponent {
  // 组件逻辑
}

然后在组件CSS中正常写样式即可：

.mat-card {
    max-width: 50%;
}

注意：关闭样式封装后，组件内的所有CSS都会变成全局样式，可能会影响其他组件，需谨慎使用。

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