Ionic 4 - sass best practices

#1

The background of my app I’m setting my ion-content to a background colour.

This means I want all of my ion-card to have a white background.

It’s supported in the docs, it says I should do this:

// (theme\variables.scss)
ion-card {
  --background: var(--brand-white) !important;
}

But then a sneaky rule jumps in and overrides it:

image

I have to put !important on the ion-card --background variable to get it to work.

I’m just starting out so I’m keen to learn best practices. Am I doing something wrong?

This works:

// (theme\variables.scss)
ion-card {
  --background: var(--brand-white);
  --ion-item-background: var(--brand-white);
}

Is this a bug in the element or maybe the documentation? Or am I doing it wrong?