Override default css values for action-sheet


I want to globally override the z-index value for the action-sheet component.

I can go and edit this file:

and under ion-action-sheet I change the value to z-index to something else (ie 222 as an abitrary example).

This gets over ridden, but does get applied, if I put !important on the value then it becomes active and applies exactly as expected and everything does what I want.

This is a problem though as whenever I update ionic I lose this change. Is there a way that I can override this value from somewhere else so that my change is maintained when ionic is updated?

I have tried putting it in page specific scss or in the theme/global.scss and it just never gets applied.

I have also tried adding a custom cssClass to my action sheet which just sets the z-index but this also never gets applied. I can see the class is applied but the z-index value never is.

Would appreciate any pointers on a better way to handle this as I am out of ideas.