Ionic 4 - How to change Toast button's style?

Ionic Framework
1

Hello there,
I have a custom button in toast, and I added cssClass to it, but I don’t know how to modify the button’s style, such as background-color, padding, width, etc.

A component contains the following code:

        this.toastInstance = await this.toastCtrl.create({
            cssClass: "custom-toast-error",
            duration: 0,
            showCloseButton: false,
            closeButtonText: "Close",
            position: "bottom",
            buttons: [{
                text: "",
                icon: "ios-close-circle",
                side: "start",
                cssClass: "custom-toast-error-button"
            }]
        });

I know how to modify the style of toast by’.custom-toast-error’, but I can’t modify the style of button by’.custom-toast-error-button’.

2

Hi friend , Did you find a solution?

Regards!

3

Hi there! Add a custom class for your Toast cssClass: 'my-custom-toast-class'.
It will end up like this:

async showToast(){
    const toast = await this.toastController.create({
      header: 'Nice Toast 😊',
      message: 'Try it to see the result 😊',
      position: 'top',
      animated: true,
      cssClass: 'my-custom-toast-class',
      buttons: [
        {
          side: 'end',
          icon: 'checkmark-circle-outline',
          role: 'ok',
          cssClass: 'custom-toast-button',
          handler: () => {
             // Do something...
          }
        }        
      ]
    });

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