Ionic 5: How should the css class be specified in an ion-select action sheet interface options?

[Arkthur]

I have set a custom css class to change the color of the cancel button in the material design version of an ion-select with action-sheet interface in the global.scss file, following what’s stated in the ion-action-sheet docs, and specified this class in the interfaceOptions of the ion-select, but I can’t make the class be taken by the ion-action-sheet element.

Meanwhile, I solved it by changing the class name to select-action-sheet, as I saw it was the name it takes automatically.

Still, I wonder if there’s any way to specify the css class of each individual action-sheet being used as an ion-select interface.

[alawmac]

+1 for this, I’m also looking to style the cancel option of an action sheet individually, is this possible using the css class passed from the ion-select?

[alimardanifa]

Hi Arkthur,

Did you find any solution to specify css?

Thanks

[alitalaee]

you can make it work with interfaceOptions

landing.page.html

<ion-select  [interfaceOptions]="customActionSheetOptions" interface="action-sheet">
</ion-select>

landing.page.ts

customActionSheetOptions = {
    header: this.translate.instant('select_country'),
    cssClass: 'country-action' // add your custom class here 
  };

global.scss

.country-action .action-sheet-group {
      background: #1E1E1E;
    color: white;
}

This will work