Ion-button changes activated colouring when inside ion-item

Ionic Framework Ionic Vue
1

This:

<ion-item>
    <ion-button color="dark" fill="outline" size="default">
  <ion-label><h2>Update Profile</h2></ion-label>
</ion-button>
</ion-item>

Looks different to this:

<ion-button color="dark" fill="outline" size="default">
  <ion-label><h2>Update Profile</h2></ion-label>
</ion-button>

Is there anyway to override this? Makes my app look inconsistent.