不同宽度的模式对话框未与:host和:ng-deep一起应用

Question

我在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;
  }

Answer 1

我知道这个答案来得太晚了，但我只是碰巧遇到了同样的问题，并找到了原因。

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

但是，您的对话框是在与相同级别的中创建的，而不是在组件内部创建的，因此不会对其应用CSS规则。

很抱歉这么粗鲁，我现在很忙。如果你需要一个更广泛的答案，请留下评论。

希望这个答案能在未来帮助到一些人。