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

【问题标题】：What scoped CSS selector allows me to override the mdDialog container width?什么范围的 CSS 选择器允许我覆盖 mdDialog 容器宽度？
【发布时间】：2017-12-16 01:53:00
【问题描述】：

给定一个典型的 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 不同。

【问题讨论】：

防止将这些属性添加到元素的方法是禁用视图封装，但似乎您只能在每个组件的基础上这样做，而不是在每个元素或每个规则集上这样做。

标签： css angular css-selectors angular-material mddialog

【解决方案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

【讨论】：

【解决方案2】：

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

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

【讨论】：