摆脱角度材质模态对话框中的空白空间
我想摆脱角度材质模态对话框中的空白区域。我如何设计CSS,让我看不到任何白色?我的css到目前为止:摆脱角度材质模态对话框中的空白空间
app-commission-me-dialog {
margin: 0px;
padding: 0px;
}
.mat-dialog-container {
margin: 0px;
padding: 0px;
}
使用ViewEncapsulation覆盖默认样式与您的样式。
在打开的对话框中的分量,做如下更改:
import {ViewEncapsulation} from '@angular/core';
@Component({
.....,
encapsulation: ViewEncapsulation.None
})
,并在该组件的CSS文件,添加以下类:
.mat-dialog-container {
padding: 0px !important;
}
这里是Plunker Demo的链接。
我对所选答案发表了评论,但我想在一个完整答案中作出澄清。如果您将对话框样式添加到您的组件并将ViewEncapsulation设置为无,这些样式将全局影响您的整个应用程序,并且任何未来的对话框都将打开而无需填充。
而是选择利用对话框的panelClass
属性:
component.ts
this.dialog.open(MyDialogComponent, {
panelClass: 'app-full-bleed-dialog',
data: ...
});
全球样式
.app-full-bleed-dialog .mat-dialog-container {
padding: 0;
}
这样的话,你仍然可以保持封装上的对话框组件样式,并且您可以选择性请根据需要重复使用您的app-full-bleed-dialog
类。
要了解更多关于定制材料部件的信息,请致电check out this guide。
那么为什么要在组件的样式中定义可以在全局样式文件中保留重写的样式呢? ViewEncapsulation由角度提供是有原因的。 – Faisal
ViewEncapsulation仅用于将组件的样式设定为自己。 OP问(换句话说)如何设计_different_组件。您加载到对话框中的组件是'.mat-dialog-container'的子组件,因此无法在不使用全局样式的情况下定位该选择器。这正是“无”无论如何,这就是它的原因。所以是的,你的方法是有效的,但是**没有可能的方法**来确保只有那一个对话框受到影响......如果你可以使用2个对话框进行演示,一个没有填充,另一个使用_without使用panelClass_,我会承认的。 –
当然我稍后会看看,我不否认你的担忧,必须先自己测试一下。 – Faisal
这是非常蛮力的方法,因为它将为* all *材质对话框填充!相反,在对话框的'panelClass'配置中添加一个像'app-full-bleed-dialog'这样的类。然后在你*全局样式*中,用'.app-full-bleed-dialog .mat-dialog-container'选择器添加你的覆盖。 –
@WillHowell,这可以通过使用'ViewEncapsulation.Native'或'ViewEncapsulation.Emulated'来避免。这里的想法是给OP提供一个方向,同时解决问题。这就是为什么我有一个包含在我的答案中的ViewEncapsulation文档的链接。我会采取你的downvote一个很好解释的评论。但我不同意你的选择方法。 – Faisal