css - 删除 Material 对话框上的怪异边框

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 文件中定义的样式将在您的应用程序中全局应用。