how to change alert controller background color using ionic 4

Question

How to change ion controller background color using ionic 4. I was tried below code:

async presentAlert() {
    const alert = await this.alertController.create({
      header: 'Add a new element',
      message: '<p> A great title is unique and descriptive! It should highlight the main attractions of your space.</p><p>Example</p><ul style="text-decoration:none"><li> Charming Victoria in the Mission.</li> <li>Cosy 2BD with Parking Included</li><li>Amazing View from a Mordern Loft</li></ul>',
      cssClass: 'alertCustomCss',
    });

    await alert.present();

CSS:

.alertCustomCss .alert-wrapper {
    background: #801ce4 !important;
  }

Answer 1

Like you can see in the docs , instead of setting the background , you need to set the --background CSS custom property.

Please try by adding the following to the global.scss file:

ion-alert.your-custom-class {
  --background: #801ce4;
}

As far as I know, you can't add this style rule in the page scss file because the ion-alert element is a global element, and is not part of the page.

In general, if you want to change the styles of any Ionic component, always check the CSS custom properties section of that component first to see if there're any CSS variables available for that change. If not, and if the element you want to change is not part of the shadow DOM of the component, you can just use CSS style rules like you did in Ionic 3 apps.