[转]Angular4 引用 material dialog时自定义对话框/deep/.mat-dialog-container

本文转自：/qq_24078843/article/details/78560556

版权声明：本文为博主原创文章，未经博主允许。 /qq_24078843/article/details/78560556

引用 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 文件

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