Ionic 7 Inline ion-alert: CSS?

Ionic Framework
1

In Ionic 7, alerts are recommended to be used inline. This should change the way how we use CSS. In Ionic 6, I had used alert-controllers, and the CSS had to be in global.scss - in a form I never understood completely but that worked. With the inline alert, this CSS doesn’t work any more. I tried
.alm { --backdrop-opacity: 0.6; --background: white; .alert-header { font-size: 18; color: white; } .alert-subHeader { font-size: 16; color: white; } .alert-message { color: white; font-size: 15; } } in page.scss and global.scss, with :white; and :black; with and without !important. No luck.
Can somebody please tell me where the CSS code should be in an Ionic 7 inline ion-alert and how the elements header, subHeader, message and [buttons] have to be addressed in the code?

2

You can apply the custom css class for styles

 public alertButtons = [
    {
      text: 'Cancel',
      role: 'cancel',
      cssClass:'customButtoncss',
      handler: () => { console.log('Alert canceled'); }
    },
]

 public alertInputs = [      
    {
      placeholder: 'Name (max 8 characters)',
      attributes: {
        maxlength: 8,
      },   
      cssClass:"alertInputCustom"   
    }
]

Styles 
,.alertInputCustom 
{
    color:  white !important;
}
.customButtoncss
{
    color:antiquewhite !important;
    border:solid 1px antiquewhite !important;
}

Details at ///Ionic 7 Inline Alert custom styles - YouTube

3

You could still use controllers.

4

Your Youtube video is great for exactly what I needed, thank you very much!

1 Like