如何在有角材料中添加占据整个对话框宽度的标题答案

【问题标题】：How to add headline that occupies entire width of dialog in angular material如何在有角材料中添加占据整个对话框宽度的标题
【发布时间】：2018-01-18 23:12:49
【问题描述】：

我是使用 Angular 材料的新手。我想在模态对话框中有一个占据整个宽度的标题。是否有角材料提供的任何属性，我可以实现以下功能。

我想要什么

我得到了什么

这是 stackblitz 链接

https://stackblitz.com/edit/matdialog-directives-demo-nl9bkr?file=app%2Ffile-name-dialog.component.ts

【问题讨论】：

标签： html angular css angular-material2

【解决方案1】：

您必须定位作为对话框一部分的 mat-dialog-container 元素并移除其填充。

类似的东西：

mat-dialog-container.mat-dialog-container {
  padding:0;
}

注意，我习惯了一个标签选择器加上一个类选择器来使选择器的特异性更高。

【讨论】：

旁注，您需要将此代码添加到 ViewEncapsulation 设置为 none 的组件中。 “封装：ViewEncapsulation.None”
它不工作。它影响剩余的html。这是更新 stackblitz 链接stackblitz.com/edit/…
对不起，我在第一次回复中犯了一个错误。它的 mat-dialog-container 而不是 mat-container-dialog。此外，如果您想按原样使用 CSS，则应将 ViewEncapsulation 设置为 None 或将 CSS 添加到全局 css 文件中。

【解决方案2】：

我找到了解决方案。我将 mat-toolbar 更改为 h4 并进行了自定义样式。这是更新后的 stackblitz 链接，您可以在其中找到解决方案。

这是模板文件

<h4 color="primary" class="dialog-headline">AddFile</h4>
    <mat-dialog-content>
      Content goes here
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button>Add</button>
      <button mat-button>Cancel</button>
    </mat-dialog-actions>

这是自定义css

.dialog-headline{
  font-weight: 500;
  margin-top: -1em;
  margin-left: -1em;
  margin-right: -1em;
  margin-bottom: 0;
  padding: 1em;
  text-align: center;
  font-size: 1.5em;
  background-color: dodgerblue;
  color:white;
}

结果

您可以在以下链接中找到现场演示

https://stackblitz.com/edit/matdialog-directives-demo-nl9bkr?file=app%2Ffile-name-dialog.component.ts

【讨论】：