Apply differents styles for buttons of ion-toast Component and shadow parts

Issue

I´m creating an application with Ionic and i´m using the toast Component with two buttons. I have to create a different style for each button.

My code is this:

import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';

@Component({
  selector: 'toast-example',
  templateUrl: 'toast-example.html',
  styleUrls: ['./toast-example.css'],
})
export class ToastExample {

  constructor(public toastController: ToastController) {}

  async presentToast() {
    const toast = await this.toastController.create({
      message: 'Your settings have been saved.',
      duration: 2000
    });
    toast.present();
  }

  async presentToastWithOptions() {
    const toast = await this.toastController.create({
      header: 'Toast header',
      message: 'Click to Close',
      position: 'top',
      buttons: [
        {
          side: 'start',
          icon: 'star',
          text: 'Favorite',
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Done',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    await toast.present();

    const { role } = await toast.onDidDismiss();
    console.log('onDidDismiss resolved with role', role);
  }

}

And i want to do this:

ion-toast::part(button):first-of-type {
  --button-color: green !important;
}
ion-toast::part(button):nth-of-type(2) {
  --button-color: red !important;
}

but it's not working :(

Is there a way to apply styles to each button in this case?

Thanks in advance.

Solution

It's not possible to use different styles for both buttons by css but yes you can use a little bit of javascript to achieve this.

put a custom class to the toast

cssClass: 'toast-custom-class'

put custom classes on both the buttons using cssClss first-button and second-button

then present toast like

await toast.present().then(() => {
  const toasts = document.getElementsByClassName('toast-custom-class');
  const shadow = toasts[0].shadowRoot;
  const childNodes = Array.from(shadow.childNodes);
  childNodes.forEach((childNode: any) => {
     const firstButton = childNode.getElementsByClassName('first-button');
     firstButton[0].setAttribute( 'style', 'color: red !important' );
     const secondButton = childNode.getElementsByClassName('second-button');
     secondButton[0].setAttribute( 'style', 'color: green !important' );
  });
});

Answered By - Vijay Kumawat