Alert with custom css

Ionic Framework
1

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!!

2

try put this in global.scss

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

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>
4

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;
}
5

Maybe only change that item in your custom class?

.customClass p {
…etc
}

?

6

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.

7

Hello,
I am also trying something like this:

async presentAlert12() {
const alert = await this.alertController.create({
cssClass: ‘alert’,
header: ‘Alert’,
//subHeader: ‘Subtitle’,
message: ‘ < strong> ‘+ " You must answer all the questions. Check the first item. " + ‘ < / strong > ‘,
buttons: [‘OK’],
});
await alert.present();
const { role } = await alert.onDidDismiss();

}

In-line css style for alertController:
message: “ < strong > “ + " You must answer all the questions. Check the first item. " + “ < / strong > “

Is it possible in this case?
Does anyone have a successful example?