[Ionic 4 RC.0] cssClass not work for Toast

Bug Report

Ionic version:

[x] 4.x

Current behavior:

I want to customise some style of toast, here’s my cssClass

ion-toast {
  --max-width: 50%;
  --background: lightgray;
}
.my-toast {
    .toast-message {
          text-align: center;
     }
}

The max-width and background was successfully changed. However the cssClass style didn’t work.

Since v4 components have completely moved to web components and shadow dom, I can understand why max-width and background worked (the component exposes variables), but looks like cssClass is broken.

I’m really confused with how to style components now, it lost flexibility as before

Expected behavior:

Steps to reproduce:

Related code:

insert short code snippets here

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.1

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 6 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/Dev/Android/android-sdk-macosx)
   ios-deploy        : 1.9.4
   ios-sim           : 6.1.2
   NodeJS            : v10.14.2 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[paulstelzer]

Thanks, but you have to check your code again (in your first issue you asked for toast, now you ask for a cssClass inside button).

You added the cssClass to the button, so it’s NOT ion-alert.my-alert, instead it’s button.my-alert (alternative add a space after ion-alert). This will work:

button.my-alert {
    color: red !important;
}

OR

ion-alert .my-alert {
    color: red !important;
}

Working:

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.