How do I position an Ionic datetime picker to the top of the screen?

Question

I am having trouble positioning this picker at the top of the screen. I have tried overriding many css properties with no success.

I am unable to override the required classes. .sc-ion-picker-md-h

  <ion-header>
      <ion-toolbar color="custom">
          <ion-buttons slot="start">
          <ion-menu-toggle><ion-icon name="menu-outline" style="font-size: 30px; color: white !important;"></ion-icon>
          </ion-menu-toggle>
          </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content>

      <ion-item>
        <ion-label>Notification Time</ion-label>
        <ion-grid>
          <ion-row justify-content-center align-items-center>
            <ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z" style="height: 100% !important;"></ion-datetime>
          </ion-row>
        </ion-grid>
      </ion-item>
    </ion-content>

Answer 1

I managed to get it on top by putting this in the theme/variables.css file:

/** Ionic CSS Variables **/
.picker-wrapper.sc-ion-picker-md {
  bottom: auto;
  top: 0;
}

(I tested using React, but I guess this should work the same way using Angular or pure js)