Need to find CSS Selector for Material Design 2's md-dialog-container

Question

Desperately trying to find a selector for md-dialog-container in angular 2's material design with no success.

I can make changes in f12 of chrome with no problem, but carrying out those changes with a valid selector in css is a problem. Researched /deep/ but it is now deprecated.

I have tried md-dialog-container {}, md-dialog-container.md-dialog-container{}, and md-dialog-container.md-dialog-container[role="dialog"] with no success.

Attached are images of me making these changes in f12 of chrome with no problem.

Answer 1

Here's what worked for me:

1. Set this on the dialog component itself:

encapsulation: ViewEncapsulation.None

2. In the parent component set the panelClass on open e.g.

this.dialogRef = this.dialog.open(myDialogComponent, {
  panelClass: 'my-dialog'
 });

3. In the css for the dialog component specifiy the panelClass e.g.

.my-dialog {

    .mat-dialog-container {
        padding: 0;
     }
}

Answer 2

The issue you're running into is due to ViewEncapsulation. By default, Angular2 uses an emulated Shadow DOM which prevents styles from components affecting each other. You can opt out of ViewEncapsulation (not recommended) or you could use the /deep/ selector. According to Angular documentation in the link provided it is alright to use this selector using Angular's default emulated Shadow DOM.

From my understanding, Angular has its own CSS processor that should should make it alright for you to use these selectors for right now. I assume they're translated. If using these is truly not an option for you, you'll have to switch to ViewEncapsulation.None.

import {ViewEncapsulation} from '@angular/core'; // and any other imports

@Component({
  selector: 'my-selector',
  templateUrl: './my-selector.component.html',
  styleUrls: ['./my-selector.component.scss'],
  encapsulation: ViewEncapsulation.None
})

Answer 3

For Angular and Material >6.x, I was able to use the ::ng-deep selector:

::ng-deep .mat-dialog-container {
  padding: 16px;
}