如何应用 css 全局 class 仅在一个组件不同？ Angular

Question

除了某些组件外，我需要在我的应用程序上使用 select all.modal-content class （即 modal ）。 示例我需要定位除组件用户之外的所有exist.modal-content 组件。 我尝试的是：

.modal-content:not(app-users) {
    background: red;
}

这适用于应用程序用户组件。 应用程序用户的选择器

@Component({
    selector: 'app-users',
    templateUrl: './app-users.component.html',
    styleUrls: ['./app-users.component.scss']
})

我想尽一切办法......我也尝试使用内部组件用户：

 .modal-content {
   background:red;
}



@Component({
    selector: 'app-users',
    templateUrl: './app-users.component.html',
    styleUrls: ['./app-users.component.scss'],
    encapsulation: ViewEncapsulation.None
})

这是可行的，但是当谈到用户组件时，这个 css 背景：红色会影响所有其他组件......

我也在尝试：

::ng-deep .modal-content {
   background:red;
}

同样的情况。 当在所有组件上受到影响的用户组件时。 我需要

 .modal-content {
   background:red;
}

仅适用于其他 30 个组件的用户组件，我需要不同的颜色。 如何解决？

Answer 1

您可以将自定义 class 添加到users组件下的所有模式。 然后你可以编写一个简单的样式来为users组件下的模式添加不同的颜色。

例如，在用户组件下的模态中添加一个名为“user-modal”的 class，如下所示。

<div class="modal-dialog">
  <div class="modal-content user-modal">
  ...
  </div>
</div>  

然后您可以在 css 文件上设置不同的样式，如下所示

.modal-content:not(.user-modal){
  background:red;
}

.modal-content.user-modal{
  background:blue;
}