ng deep styles make separate for different component in Angular 5

Question

我在两个不同的组件中使用 **ngx bootstrap modal**，在两个不同的组件中我使用 ::ng-deep .modal-dialog 来设置宽度和高度

in component one

::ng-deep .modal-dialog {
width: 200px;
height : 200px
}

in another(2nd) component 
::ng-deep .modal-dialog {
    width: 400px;
    height : 400px
    }

但是当我将一个组件移动到另一个组件时，::ng-deep 值变得相同，看起来像常量宽度和高度这个 css 模态的值不会根据组件级别而变化它就像全局级别

Answer 1

尝试按照 here 的说明添加自定义 class。在这个例子中 gray modal-lg CSS class 添加到现有的 modal-dialog class:

<div role="document" class="modal-dialog gray modal-lg">
  <div class="modal-content">
    ...
  </div>
</div>

所以，尝试在每个组件中添加不同的 classes（component1 和 component2 在我的例子中）并重写你的 CSS:

::ng-deep .modal-dialog.component1 {
  width: 200px;
  height : 200px
}

在另一个（第 2 个）组件中

::ng-deep .modal-dialog.component2 {
  width: 400px;
  height : 400px
}

请注意，一旦加载组件，此 CSS class 将在全球范围内可用（因为 ::ng-deep），因此具有相同名称的最新 class 将获胜.

ng deep styles make separate for different component in Angular 5

ng deep styles make separate for different component in Angular 5

angular-ui-bootstrap

bootstrap-modal

angular