Alert with custom css

Hello

I am trying to use inline styles into an alert of Ionic 4.

Here’s and example:

const alert = await this.alertController.create({
            header: 'TEST',
            message:  "<p><i>An example</i> <i><span style='color:#FF0000;'>This is red</span></i></p>",
            cssClass : 'default-alert',
            buttons: ['Aceptar']
        ]
});
return await alert.present();

I noticed that the ‘message’ param can accept either plaintext or HTML as a string. But when I display the alert the inline css “color:#FF0000” is not displayed.

Any help please!!

try put this in global.scss

.default-alert{
 --background: #161e2c!important;   
 --color:#FF0000!important;
 --border-radius:5px!important;
}

But I don’t need to change all the text, only some parts of it.
Like this

<p>this is a normal text with <strong>BOLD</strong> and <span style="color:#ff0000">Red</span></p>

duplicate this for your custom alert

const alert = await this.alertController.create({
            header: 'TEST',
            message:  "<p><i>An example</i> <i><span style='color:#FF0000;'>This is red</span></i></p>",
            cssClass : custom',
            buttons: ['Aceptar']
        ]
});
return await alert.present();

in scss 
.custom{
 --background: #161e2c!important;   
 --color:#FF0000!important;
 --border-radius:5px!important;
}

Maybe only change that item in your custom class?

.customClass p {
…etc
}

?

Is this the only possible way to do it? I would prefer to use inline css instead of an external file with classes like that.