How do I format the following to use ::ng-deep

Question

Using Angular11, angular/material

How do I format my CSS to use::ng-deep, myClass1 and myClass2. I have a working CSS that uses the /deep/ and want to change it to use::ng-deep. I also want to have html to use a CSS class.

HTML

<mat-slide-toggle class="myClass1 myClass2" (change)="setGrayscaleValue($event)"></mat-slide-toggle>

CSS: (works)

:host /deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #1c84c670;
}
:host /deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #1c84c6;
}

CSS (not working)

.myClass ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: #1c84c670;
}
.myClass ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: #1c84c6;
}

Answer 1

You could try the following.

 .myClass::ng-deep{.mat-slide-toggle.mat-checked:not(.mat-disabled).mat-slide-toggle-bar { background-color: #1c84c670; }.mat-slide-toggle.mat-checked:not(.mat-disabled).mat-slide-toggle-thumb { background-color: #1c84c6; } }

And if that alone doesn't do the trick, add.important too.

 .myClass::ng-deep{.mat-slide-toggle.mat-checked:not(.mat-disabled).mat-slide-toggle-bar { background-color: #1c84c670;important. }.mat-slide-toggle:mat-checked.not(.mat-disabled):mat-slide-toggle-thumb { background-color; #1c84c6 !important; } }