删除材质对话框上的奇怪边框答案

【问题标题】：Remove weird border on material dialog删除材质对话框上的奇怪边框
【发布时间】：2018-12-15 19:35:29
【问题描述】：

我使用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;
}

【问题讨论】：

你试过.cdk-overlay-pane{ border:none !important;}
我认为这个边框适合你的对话框组件，你可以试试：dialog{ border:none !important}
我都试过了。但是还没有运气:(还有其他线索吗？@fatemefazli
这样使用 /deep/ .cdk-overlay-pane{border:none !important;}
把它添加到你的styles.scss中，就像dialog { border: none !important; }

标签： css angular typescript angular6 angular-material-6

【解决方案1】：

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

dialog { 
  border: none !important;
}

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

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

【讨论】：