Cant change the CSS Custom Properties of theIonic Alert

Ionic Framework ionic-v3
1

Hi there!

I am creating an allert on my service file, but the problem is that i am having dificulties with the css proprierties of the alert.

Code:

async createDiscountAlert(restaurantData) {
    const alert = await this.alertController.create({
      cssClass: 'teste',
      header: restaurantData.promotion.type.discountTittle,
      message: restaurantData.promotion.type.discountDescription,
      buttons: [
        {
          text: 'Percebi!',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
  }

The problem is that i dont know where to place my css since i am creating the alert ona service. I tried to place the css on the page that i am calling the function but it doesnt change anything.

This is my css:

.teste {
  background-color: #F35E5D !important;
  background: #F35E5D  !important;
  color: red !important;
  $alert-md-background-color: #F35E5D;
  $alert-ios-background: #F35E5D;
}

Can anyone help me?

2

The bolded part is irrelevant.

The folks who wrote the docs can.

3

Why is it irrelevant? I tried to place on the ccs file of my page component, i tried to place on the main ccs file and nothing works.

And i read the docs before placing this here off corse, and still need help

4

Because the correct place to put CSS for modals is independent of how they are spawned.