什么作用域CSS选择器允许我覆盖mdDialog容器宽度？

Question

给定一个典型的Angular Material对话框，其.mat-dialog-container的最大宽度设置为80vw，我如何制定一个选择器来覆盖它？我想要一个真正的全角对话框。

问题在于范围界定 - Angular-CLI使用范围属性选择器编译组件CSS。

因此，这个：

.parent .child 

变为：

.parent[some_attr] .child[some_other_attr]

但是，这个特殊元素似乎并没有附加到任何组件上 - 它没有动态生成的属性。

我已尝试在对话框样式表和主机组件的样式表中覆盖，但没有成功。

Angular special selectors

Dialog Plunkr

让我再试一次。我没有很好地解释这个问题。

我想说我将其添加到我的主机组件样式表中：

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

我正在运行构建监视，因此应用程序会重新编译。 CSS输出现在是：

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

但是，该元素实际上并没有属性_ngcontent-c6。该属性应用于.mat-dialog-container祖先兄弟姐妹的其他元素。选择器是错的。

如果我将CSS添加到对话框组件的样式表中，会发生类似的事情，但具有不同的属性ID。

Answer 1

如果你可以在主体标签上添加一个id，并希望它在所有这些对话框中，你可以使用这个

<style>
#bodyID .mat-dialog-container {
  max-width:100vw;
  background-color: blue;
}
</style>

它将覆盖当前样式，至少在您提供的plunker中。

如果您需要为每个对话框指定特定样式，您是否对此进行了调查？

how-to-style-child-components-from-parent-components-css-file

Answer 2

您不需要正文ID，因为正如您所提到的那样，选择器会被Angular重写，以便它完全停止匹配该元素。

但是，似乎唯一的解决方法就是举起手来忘记组件样式表范围，并将CSS规则添加到页面样式表中。当然，需要注意的是，需要将此规则添加到使用该组件的每个页面中，这可能被视为荒谬，具体取决于您的组件的用途和使用者。