What scoped CSS selector allows me to override the mdDialog container width?

Viewed 624

Given a typical Angular Material dialog, which has a max-width of 80vw set on .mat-dialog-container, how can I formulate a selector to override it? I'd like a true full-width dialog.

The problem is scoping--Angular-CLI compiles component CSS with scope attribute selectors.

Therefore, this:

.parent .child 

becomes:

.parent[some_attr] .child[some_other_attr]

However, this particular element doesn't seem attached to any component--it doesn't have a dynamically-generated attribute on it.

enter image description here

I've attempted overrides in both the dialog stylesheet and the host component's stylesheet with no success.

Angular special selectors

Dialog Plunkr


Let me try again. I'm not doing a good job of explaining the issue.

Let's say I add this to my host component stylesheet:

.mat-dialog-container {
    max-width: 100%;
}

I have a build watch running, so the app is recompiled. The CSS output is now this:

.mat-dialog-container[_ngcontent-c6] {
    max-width: 100%;
}

However, that element doesn't actually have the attribute _ngcontent-c6 on it. That attribute is applied to other elements which are inside siblings of ancestors of .mat-dialog-container. The selector is just wrong.

If I add that CSS to the dialog component's stylesheet, something similar happens, but with a different attribute ID.

2 Answers
Related