ng deep样式为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 的说明添加自定义类。在这个例子中，gray modal-lg CSS 类被添加到现有的modal-dialog 类中：

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

所以，尝试在每个组件中添加不同的类（component1 和 component2 在我的示例中）并重写您的 CSS：

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

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

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

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