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

Question

I need to select all.modal-content class ( that is modal ) on my application except some component. Example I need to target all component where is exist.modal-content except component Users. And what I try:

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

This is apply and on app-users component. Selector for app-users

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

I am try everythink... I am also try with inside component Users:

 .modal-content {
   background:red;
}



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

This is work, but when come to Users component this css background: red is affected on all others components....

I am also try with:

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

Same situation. WHen come to Users component affected after on all component. I need

 .modal-content {
   background:red;
}

Only for USERS component for others 30 component I need different color. How to fix it?

Answer 1

You can add a custom class to all modals under your users component. Then you can write a simple style to add different colours for modals under users component.

For example, add a class called 'user-modal' to your modal under user component like below.

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

Then you can style it differently on your css file like below

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

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