Check out example codes for "ionic header background color". It will help you in understanding the concepts better.

Code Example 1

It seems like the ion-header acts more as a container for an inner ionic component (like an ion-toolbar). I looked over the Ionic v4 ion-toolbar documentation. This component has many custom css custom properties, including --background, that can be customized. This may be what you're looking for.

Assuming you used the CLI to create a 'login' page component, you can add a new css class definition to the login.scss file:

    --background: #54d61c;
And then refer to it in your file:

  <ion-toolbar class="new-background-color">

Learn ReactJs, React Native from