Ionic 3 alertCtrl custom cssClass not working

Question

I followed the official documentation and my code is like below:

let alert = this.alertCtrl.create({
  title: 'Alert',
  subTitle: 'Subtitle',
  message: 'This is an alert message.',
  buttons: ['OK'],
  cssClass: 'profalert'
});

alert.present();

and my CSS:

.profalert{
    color:#e7333c;
    background-color: red;

}

But this is not changing the alertbox color. I also tried alert .setCssClass('profalert');

I already checked this

score 6 · Accepted Answer · answered Nov 25 '17 at 03:52

6

It is working fine.You just need to declare it inside the app.scss file.

app.scss

.profalert{
    color:#e7333c;
    background-color: red;

}

Result:

When I applied your style to my app's alert box:

answered Nov 25 '17 at 03:52

Sampath

63,341
64
307
441

Thanks, I was adding the css in the page.scss. its working after adding the css inside app.scss. – Arijit Nov 25 '17 at 10:02
any idea why it should be in app.css? – George Jul 10 '18 at 13:34
You need to apply it globally. Then only it works. @George – Sampath Jul 10 '18 at 18:03
okay thank you, i was just wondering why... i believe its a matter of priority or something – George Jul 11 '18 at 08:34

score 6 · Answer 2 · edited Jun 20 '20 at 09:12

6

If you're working with Ionic 4 then add:

.profalert{
color:#e7333c;
background-color: red;
}

to global.scss

If interested in horizontal alignment of alert control buttons, check my answer here

If you're migrating from older versions to ionic 4.x, check out this repo for breaking changes.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 05 '18 at 19:35

7guyo

3,047
1
30
31

score 0 · Answer 3 · answered Jun 06 '19 at 20:44

0

To elaborate on the previous answers, you can actually do it in your page.css but it needs to be outside of the page-name{ } like so:

page-name{

}

.profalert{
    color:#e7333c;
    background-color: red;

}

answered Jun 06 '19 at 20:44

Mike

71
1
5

score 0 · Answer 4 · edited Jan 29 '20 at 17:33

0

.profalert {
    color:#e7333c;
    background-color: red;
}

1.add scss-class in global.scss in ionic4,
2.add scss-class in app.scss in ionic3,
you should add scss-class in root scss file

edited Jan 29 '20 at 17:33

ChrisMM

8,448
13
29
48

answered Jan 29 '20 at 17:07

Anand Acharya

89
1
3

score 0 · Answer 5 · answered Oct 24 '20 at 21:32

In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Alert can be presented from within a page, the ion-alert element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the src/global.scss file or you can register a new global style file by adding to the styles build option in angular.json.Style Placement

Ionic 3 alertCtrl custom cssClass not working

5 Answers5

If you're working with Ionic 4 then add: