Ionic 4 - Unable to change toast close button color

@iondafi wrote:

I read the documentation, I followed it but I’m unable to change the close button color

I show the toast with the following code where I specify the cssClass as shown in documentation

    await this.toastController.create({
      message: error,
      color: 'danger',
      showCloseButton: true,
      cssClass: 'button-color-changed',
    }).then(toast => toast.present());

Then to my component scss file I add the corresponding class shown below but never changed

.button-color-changed {
  --button-color: #fff;
}

Then I read this issue and changed the css prepending the class with ion-toast but again nothing changed

ion-toast.button-color-changed {
  --button-color: #fff;
}

Then I moved the css class to variables.scss (before using the ion-toast prefixed then the other) but again nothing

Please help me to understand what I missed

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 8 other plugins)

System:

   Android SDK Tools : 26.1.1 (/opt/devel/android/android-sdk-macosx/)
   NodeJS            : v11.12.0 (/usr/local/Cellar/node/11.12.0/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

Posts: 1

Participants: 1

Read full topic