CODEWITHSUNDEEP
cssangulartypescriptangular6angular-material-6
Sampath
Sampath

Reputation: 65860

Remove weird border on material dialog

I use Angular material 6 dialog component. It showed a weird border. Can you tell me how to remove that? I have tried like below. But it is not working. If I do that inside the browser (inline) then it works. Any clue?

enter image description here

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;
}

Upvotes: 2

Views: 7293

Answers (1)

bodorgergely
bodorgergely

Reputation: 578

Simplest way would be to declare style for the dialog inside your styles.css file. Like so:

dialog { 
  border: none !important;
}

The reason the style is not applied when you put it in your component, is because in the component scope you don't have access to the mat-dialog. Your component will be rendered inside the mat-dialog component, in a different component.

Styles defined in the styles.css file will be globally applied in your application.

Upvotes: 3

Related Questions