不同宽度的模态对话框不适用于 :host 和 :ng-deep答案

【问题标题】：Modal Dialog of different widths are not applied with :host and :ng-deep不同宽度的模态对话框不适用于 :host 和 :ng-deep
【发布时间】：2021-02-23 13:00:09
【问题描述】：

我有一个 Angular 组件，单击按钮会打开模态对话框。我有许多这样的不同按钮，它们可以打开不同宽度的不同类型的模态对话框。我正在使用 Ng bootstrap 模态对话框和模态对话框都是相同的宽度，但我希望它是不同的宽度。我尝试覆盖模态对话框组件 ::ng-deep 中的 css 但 :host 不起作用。我在这里做错了什么，请提出建议。

我的模态对话框之一的 css 如下所示

  ::ng-deep .modal-dialog {
    min-width: 700px !important;
    max-width: 900px !important;
    width: 95% !important;
    background-color: red !important;
  }

下面的css没有被应用

:host::ng-deep .modal-dialog {
    min-width: 700px !important;
    max-width: 900px !important;
    width: 95% !important;
    background-color: red !important;
  }

【问题讨论】：

标签： css angular

【解决方案1】：

我知道这个答案早就应该回答了，但我恰好遇到了同样的问题并找到了原因。

“:host”伪选择器将 CSS 规则应用于 组件。

但是，您的 Dialog 是在与 同一级别的

中创建的，而不是在组件内创建的，因此不应用 CSS 规则给它。

抱歉这么粗鲁，我现在正在上班。如果您需要更广泛的答案，请发表评论。

希望这个答案可以帮助将来的人。

【讨论】：