ionic5 设置背景颜色

Question

I have created a few custom colors and would like to set the background of a ion-col cell. But how? My colors work for buttons for instance:

<ion-button color="custom-blue" ... >...</ion-col>

but

<ion-col color="custom-blue" ... >...</ion-col>

fails. Same with background-color . Can I set ion-col colors at all or to I have to paste a ion-item into it?

Answer 1

Use background-color CSS property. color attribute does not exist for ion-col

However, you won't be able to access your custom color directly inside SCSS file. Use this to apply background to all ion-col :

ion-col{
background-color:var(--ion-color-custom-blue);
}

Answer 2

Try this. Add your --ion-color-custom-blue to varibles.scss

In your html page

<ion-col class="color-class">

In your scss

.color-class {
  background-color: var(--ion-color-custom-blue);
}