css - 什么范围的 CSS 选择器允许我覆盖 mdDialog 容器宽度？

Question

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

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

因此，这:

.parent .child 

变成:

.parent[some_attr] .child[some_other_attr]

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

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

Angular special selectors

Dialog Plunkr

---

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

假设我将其添加到我的主机组件样式表中:

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

我有一个正在运行的 build watch，所以应用程序被重新编译了。 CSS 输出现在是这样的:

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

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

如果我将该 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