Background depends on the colors I use in Ionic 4

Ionic Framework
1

ion-menu has various CSS custom properties.. One of which is --background.

Please tell me how I can set the --background CSS property. Is this set in an HTML attribute? In SCSS? Either way? Other people have reported a similar problem.

Given in variables.scss I have:

:root {
  /* Set the background of the entire app */
  --ion-background-color: #ffffff;

I tried:

<ion-menu class="myMenu" contentId="menu-content">
.myMenu {
    --background: red;
}

And the background stays at whatever I set for --ion-background-color

Even more strange. This works (gives me a --ion-color-primary):

:host {
    ion-content{
        --background: #orange;
    }
    .myMenu {
        --background: var(--ion-color-primary);
        --height: 100em;
        --width: 100em;
    }
}

And again. If I only change the color of ion-content (gives me --ion-background-color):

:host {
    ion-content{
        --background: #ffffff;
    }
    .myMenu {
        --background: var(--ion-color-primary);
        --height: 100em;
        --width: 100em;
    }
}

This gives me --ion-background-color:

:host {
    ion-content{
        --background: var(--ion-background-color);
    }
    .myMenu {
        --background: var(--ion-color-primary);
        --height: 100em;
        --width: 100em;
    }
}

And this also gives me --ion-background-color:

:host {
    --background: orange;
    .myMenu {
        --background: var(--ion-color-primary);
        --height: 100em;
        --width: 100em;
    }
}