How to change background color of ion-radio without updating background color of entire app?

I am trying to change the background of the ion-radio-group below to match the other rows:

enter image description here

I have shown my HTML & CSS below.

I tried adding the rowStyle class to the row. That changes the background of the row, but the radio button’s are still appearing blue.

If I update the --ion-background-color value in my CSS for ion-content , the radio button background does change, but so does the entire page.

I just want all the rows to match.

Can someone please tell me how to do this?

  <ion-grid style="width: 75%">

    <ion-radio-group [(ngModel)]="userType">
      <ion-row class="rowStyle">
          <ion-radio value="customer"></ion-radio>
          <ion-radio value="supplier"></ion-radio>

    <ion-row class="rowStyle">
      <ion-icon name="person" color="secondary"></ion-icon>
      <ion-input type="text" placeholder="Your Name" [(ngModel)]="name"></ion-input>

    <ion-row class="rowStyle">
      <ion-icon name="mail" color="secondary"></ion-icon>
      <ion-input type="email" placeholder="Your Email" [(ngModel)]="email"></ion-input>

    <ion-row class="rowStyle">
      <ion-icon name="key" color="secondary"></ion-icon>
      <ion-input type="password" placeholder="Your Password" [(ngModel)]="password"></ion-input>

    <ion-button expand="block" shape="round" fill="outline" color="light" style="margin-top: 20px;" (click)="signUp()">Sign Up</ion-button>


ion-content {

  .logo { 
    font-size: 25vh;
    margin-top: 40px;
    margin-bottom: 20px;

  h1, h6 {
    color: white;
    font-size: 1em;
    background-color: danger

  .rowStyle {
    background-color: white;
    padding-left: 10px;
    border-radius: 30px;
    margin-bottom: 10px;

    ion-icon {
      margin-top: 13px;
      margin-right: 10px;

I added the rowStyle class to the row. The background of the tag is appearing white, but the background of the 2 radio buttons isn’t changing.