Ionic 4: Customizing ion-card background

Ionic Framework
1

Hi

I’m just starting to customize styles of my app because it seems so easy if I believe to the documentation :wink:
But sadly already the simplest things doesn’t work.

1. I changed the the background color of the whole app which worked (variables.scss)

:root {
  --ion-background-color: green;
}

2. I tried to change the background of ion-card as well

ion-card {
  --background: yellow;
}

but this rule has no impact and does not change the background of my ion-card?!
according the documentation there is a css-custom-property ‘–background’ for ion-card

I also saw some strange behavior when I was investigating the rendered DOM of my page.
Where is this strange class ‘.sc-ion-card-ios-h’ coming from?

Capture
Capture996×534 55.7 KB

2

with this workaround it works for the moment, but I think it’s not the solution to use !important

ion-card {
  --background: yellow !important;
}
1 Like
3

FWIW, your rule takes effect without !important if you put in the SCSS file for a specific page, as opposed to globally.

Additionally, it also works as expected for me even in global.scss when using v5rc1.

1 Like
4

thanks for your reply…
If I put the rule in the scss for the specific page I have to do it for every page where
I wanna use this ion-card with that specific style right?

This is duplicated code at the end? Which is not so pretty :-/

With v5rc1 you mean a new Ionic version?

5

Right, the one being discussed in this thread. I think this is the relevant commit that changed things.

6

Yes, as @rapropos said, this is an issue in Ionic 4 due to Card being a scoped component, this is the relevant issue: https://github.com/ionic-team/ionic/issues/17425

It will be fixed in Ionic 5 by being converted to a shadow component.

7

Thank you for your feedback.
I can live with my little workaround at the moment and exited to play with the new Ionic V5 :slight_smile:

Thank you!

1 Like