How to apply styles to a confirmation alert?


I was searching how to achieve it but I couldn’t figure it out. Please have a look and tell me what I’m doing wrong:


	<div class="detailcontent">
			<button class="payConfirmation" ion-button clear text-uppercase color="greengrass" (click)="payment_method()" large item-right>


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AlertController } from 'ionic-angular';

	selector: 'page-booking-confirmation',
	templateUrl: 'booking-confirmation.html',
export class BookingConfirmationPage {

	constructor(public navCtrl: NavController, public navParams: NavParams, public alerCtrl: AlertController) {	}	

payment_method() {

		let method = this.alerCtrl.create({			
			message: 'Payment Method',
			buttons: [
					text: 'Individual',
					cssClass: 'method-color',
					handler: () => {
						console.log('Individual clicked');
					text: 'Group',
					cssClass: 'method-color',
					handler: () => {
						console.log('Group clicked');



page-booking-confirmation {

		color: rgba(136,168,39,1);

Graphically I want this:

But I got this:

Please help


This is sort of confusing, but alerts live outside your page. You need to move alert-specific styling to the global app.scss.


Thanks for your reply

I change it to the app.scss file but it doesn’t work.


My CSS knowledge is pretty weak, but it looks like your color selector is clashing with the theme. Generally I dislike doing this, but you can try overriding with !important.


Surely, it is not the most elegant way, but it works, thank you a lot!