Remove weird border on material dialog

Question

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?

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

did you try with ```.cdk-overlay-pane{ border:none !important;}``` — Fateme Fazli, Jul 07 '18 at 12:30
and i think this border is for your dialog component you can try : ```dialog{ border:none !important}``` — Fateme Fazli, Jul 07 '18 at 12:33
I have tried both. But no luck yet :( Any other clue? @fatemefazli — Sampath, Jul 07 '18 at 12:39
use like this /deep/ .cdk-overlay-pane{ border:none !important;} — Praveen M P, Jul 07 '18 at 12:40
Refer this Question https://stackoverflow.com/questions/43690291/how-to-overwrite-angular-2-material-styles — Praveen M P, Jul 07 '18 at 12:41
No. Still the same issue. I have tried like this: `:host /deep/ .cdk-overlay-pane{ border:none !important;}` @PraveenMP — Sampath, Jul 07 '18 at 12:49
add it in your styles.scss, like so `dialog { border: none !important; }` — bodorgergely, Jul 07 '18 at 12:55
Oh.. Thanks a lot. It works. Please put that as an answer @bodorgergely — Sampath, Jul 07 '18 at 13:01

score 3 · Accepted Answer · answered Jul 07 '18 at 13:25

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.

Remove weird border on material dialog

1 Answers1