I am struggling with the Angular material 6 dialog component as it is displaying a strange border. I have attempted to remove it using the code below, without success. Interestingly, when I apply the style inline in the browser, it works fine. Any suggestions on how to fix this?
https://i.stack.imgur.com/SN0kS.png
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;
}