删除材质对话框上的怪异边框

Question

我使用Angular material 6对话框组件。它显示了一个奇怪的border。你能告诉我如何删除吗？我已经尝试过如下。但这是行不通的。如果我在浏览器（内联）中执行此操作，那么它将起作用。有任何线索吗？

dialog.component.html

<h1 mat-dialog-title>Confirm</h1>
<div mat-dialog-content>
    <p>Are you sure wanted to delete the account?</p>
</div>
<div mat-dialog-actions>
    <button mat-button cdkFocusInitial [mat-dialog-close]="false">Cancel</button>
    <button mat-button [mat-dialog-close]="true">Delete</button>
</div>

dialog.componet.css

dialog.ng-star-inserted {
    border: none !important;
}

Answer 1

最简单的方法是在styles.css文件中声明对话框的样式。像这样：

dialog { 
  border: none !important;
}

将样式放在组件中时未应用样式的原因是，因为在组件范围内您无权使用mat-dialog。您的组件将呈现在mat-dialog组件内部的另一个组件中。

在styles.css文件中定义的样式将在您的应用程序中全局应用。