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

Question

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

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

因此，这：

.parent .child

变成：

.parent[some_attr] .child[some_other_attr]

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

我尝试在对话框样式表和宿主组件的样式表中进行覆盖，但均未成功。

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

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

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

我有一个构建手表正在运行，所以应用程序被重新编译。CSS 输出现在是这样的：

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

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

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

score 0 · Accepted Answer

如果您可以将 id 添加到主体标签，并且希望它出现在所有这些对话框中，则可以使用它

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

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

如果您需要每个对话框的特定样式，您是否考虑过这个？

score 0 · Accepted Answer

您不需要 body id，因为正如您所提到的，选择器由 Angular 重写，因此它完全停止匹配元素。

但是，是的，解决这个问题的唯一方法似乎就是举起双手，忘记组件样式表的范围，并将您的 CSS 规则添加到页面样式表中。当然，需要注意的是，需要将此规则添加到使用该组件的每个页面中，这可能会被视为荒谬，具体取决于您的组件打算用于什么以及由谁使用。

2 回答 2