如何使用 ng-material-treetable 更改列宽？

Question

我意识到内部正在使用 material data-table 。当我使用 table mat-table 时。我可以使用 CSS 进行以下更改，但不知何故它不起作用，我该怎么做？

.mat-column-[columnname] { 
    width: 50% !important;
}

Link 使用 stackblitz 上的代码： https://stackblitz.com/edit/angular-xpcm2l?file=src/app/app.component.css

Answer 1

您在组件样式表中定义的样式仅限于该组件的范围，这意味着 class 在 app.component.css 中定义的选择器不会影响其他组件的样式。这是为了避免一个组件因使用相同的 class 名称而意外更改其外观而与另一个组件发生冲突。

见https://angular.io/guide/component-styles#style-scope

Angular 通过神奇地向 class 名称添加一些前缀来做到这一点。 为了使您的代码正常工作，您应该 移动块

.mat-column-owner{
  width:50% !important;
  min-width: 50% !important;
  max-width: 50% !important;
}

到styles.css文件 或将选择器更改为 ::ng-deep .mat-column-owner.

::ng-deep 已被破坏，将在 angular.

的某些未来版本中删除

Answer 2

如果您检查浏览器的输出，您会发现您的列宽是在以下选择器中定义的（参见示例）：

示例：

td[class*=' mat-column'][_ngcontent-c9] {
    width: 10vw;
    min-width: 10vw;
    max-width: 10vw;
}

您应该能够在 scss 文件中根据需要添加和修改此选择器。

td[class*=' mat-column'][_ngcontent-c9]

此选择器影响 table 中的每个 'td' 元素，其中包含以“mat-column”开头的 class 并与作为目标并开始的另一个属性组合使用“_ngcontent-c9”。

你试过这样的递归方法吗？

td[class*=' mat-column'] *
{
  ...
}

这样您就可以完全避免可能由 Angular 动态生成的目标属性。

编辑：

我还建议您避免在 css 中使用 !important。我认为这不是一个好习惯。