Angular4 引用 material dialog时自定义对话框

引用 material dialog 方法　官方文档
自定义弹框内容后的结果

dialog html

<div style="background-color: #4eaee1">
  我是内容
</div>

啊嘞，奇怪了，我并没哟设置　padding值，但是却有padding

查看material dialog 组件源码(dialog.es5.js)，看看发现了啥

MatDialogContainer.decorators = [
        { type: Component, args: [{selector: 'mat-dialog-container',
                    template: "<ng-template cdkPortalHost></ng-template>",
                    styles: [".mat-dialog-container{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);display:block;padding:24px;border-radius:2px;"],
                    encapsulation: ViewEncapsulation.None,
                    preserveWhitespaces: false,

那啥从源码发现了dialog的容器布局中添加　.mat-dialog-container padding:24px

所以dialog布局造成有边距

方案自定义样式

/deep/.mat-dialog-container {
  padding: 0px;
}

注意点 class名和组件里相同，前面加 /deep/，大概意思是会深入组件内对有该class的组件设置样式，这样会覆盖组件内的　padding

结果
这里写图片描述

举一反三：那么若是在angular中引入其他第三方组件，但又不想用它的样式则可以通过这样的方案去改变它的样式

MatDialog　其他属性设置探索

{
   width: '250px',  //宽
   height: '100px',  //高
   position: {top: '30px'}, //距离浏览器上边距(top,bottom,left,right)
   disableClose: true,   //点击对话框外不消失
   // hasBackdrop: true,
   // backdropClass: `btn-default`,
   // panelClass: `btn-default`,
   data: { content: response.msg} //往对话框里传参数
 }

主要属性设置可以看源码中的 dialog-config.d.ts 文件