How to style Ionic 4 nested components

Question

I have some troubles with styling Ionic 4 components. I have changed global variables: primary, secondary and background colors.

After changes, ion-picker background also changed.

I have to add pickerOptions to ion-date:

<ion-datetime [pickerOptions]="picker"></ion-datetime>

picker = {
    cssClass: 'checkout-picker'
}

Than I tried to change background as docs said:

.checkout-picker {
    --background: white !important;
}

Nothing happened.

What to do?

Answer 1

Try this way

::ng-deep .checkout-picker {
    --background: white !important;
}