css - 删除材质对话框上的奇怪边框

Question

我使用Angular 材质 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>

对话框.组件.css

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

Answer 1

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

dialog { 
  border: none !important;
}

将样式放入组件时未应用样式的原因是因为在组件范围内您无权访问 mat-dialog。您的组件将在 mat-dialog 组件中呈现在不同的组件中。

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