角材料2表头中心对齐

如果md-sort-header被添加到md-table中的md-header-cell中，它总是左对齐的。如何居中对齐标题单元格，如“名称”？角材料2表头中心对齐

<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> Name </md-header-cell>

2017-09-11 Yong

md-header-cell GET '翻译' 与类= “垫排序集管容器” 的容器。使用它，您可以使用ng-deep设置其风格。所以放在部件的样式表如下：

之一：

::ng-deep .mat-sort-header-container { 
    display:flex; 
    justify-content:center; 
}

或

mat-header-cell { 
    display:flex; 
    justify-content:flex-end; 
    }

2017-09-11 12:21:13 Vega

看看我的答案以及将来参考类似的问题，+1的答案。 – Faisal

接受的答案是正确的。但是，::ng-deep已折旧并可能在将来（official documentation）丢失。

不推荐使用阴影刺穿后代组合器，并且支持将从主要浏览器和工具中删除。因此，我们计划在Angular中删除支持（对于/ deep /，>>>和:: ng-deep的所有3个）。直到那么:: ng-deep应该更适合与这些工具的更广泛的兼容性。

正确的方法是使用ViewEncapsulation。在你component.ts，添加以下内容：

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

@Component({ 
    .... 
    encapsulation: ViewEncapsulation.None 
})

，并覆盖在你的component.css文件中的类：

.mat-sort-header-container { 
    display:flex; 
    justify-content:center; 
}

2017-09-11 12:45:39 Faisal

：ng-deep不被剥夺！它/深/只。封装可能会影响其他类 – Vega

请阅读文档：不推荐使用阴影穿孔后代组合器，并且正在从主流浏览器和工具中删除支持。因此，我们计划放弃对Angular的支持（对于所有3个/ deep /，>>>和:: ng-deep）。' – Faisal

@Vega，我不是说你的回答不起作用，OP可能会面对一旦':: ng-deep'被完全删除，未来的一个问题。 – Faisal

我觉得这个问题给出的解决方案是在他们的做法太严格，我有一个类似的问题，我需要改变一些css属性mat-sort-header-container，但动态。

我不喜欢的东西Vega的答案，但细微不同的样式如何采取：

::ng-deep .mat-sort-header-container{ 
    justify-content: inherit; 
    /* other inheritable properties */ 
}

这将打开其父一些属性风格 mat-header-cell这是你的HTML代码，以便您在 mat-header-cell提供与任何风格

在ng-deep这是从它的父母继承，那么只有那些样式和其他没有比那将下降该层次结构。

2018-01-25 09:13:47

回答