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

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?

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:

       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;
1 Like

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