How to change the colour of the destructiveButton text in an IonicActionSheet?


#1

Given the IonicActionSheet, how do I manually change the colour of the field: destructiveText: 'Delete', ?

Ideally, is there a variable in the .sass file that can be overriden?


#2

Looking at the styling in _action-sheet.scss the color is not set by a variable:

&.destructive {
  color: #ff3b30;
  &:hover {
    color: #ff3b30;
  }
}

So you could pass a custom class to the action sheet and override it that way, or just override the destructive class directly.

  1. Passing the class to the action sheet:

     $ionicActionSheet.show({
       ...
       cssClass: 'custom-action-sheet',
       ...
     });
    

    & Setting the custom CSS:

     .custom-action-sheet .action-sheet .button.destructive {
       color: green;
     }
    
  2. Overriding the existing CSS:

     .action-sheet .button.destructive {
       color: green !important;
     }
    

#3

Thanks a lot, keep up the good work at Ionic!