本文转自：

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24078843/article/details/78560556

• 引用 material dialog 方法　

• 自定义弹框内容后的结果

  

dialog html

     
        我是内容
     

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

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

MatDialogContainer.decorators = [        { type: Component, args: [{selector: 'mat-dialog-container',                    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 文件

--------------------- 本文来自 遗忘了的自己 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/qq_24078843/article/details/78560556?utm_source=copy