Change background-color of an unchecked Material-UI checkbox

I am working with React-Redux and Material-UI for styling. I have a < Checkbox /> that is on a toolbar. The toolbar's background-color is blue (#295ED9).

I've managed to change the color of the checkbox, when it is checked. I have also changed the color of the outline of the checkbox to white, when it is unchecked.

Problem: I cannot change the background-color / fill-color of the checkbox when it is unchecked. It is always the same color as the toolbar it is on (blue - #295ED9).

I have tried changing the background-color, color, and fill attributes of the < svg > and the < path > to white.

The best result I can get is when I change the < svg > fill attribute to white. Unfortunately, this does not make the checkbox fill with a white background when unchecked.

JSX

<div className="hasBalance">
  <FormControlLabel
    control={<Checkbox color="primary"/>}
    label="Has Balance"
  />
</div>

SCSS

hasBalance {
  grid-area: balance;

  .MuiSvgIcon-root {
    fill: white;
  }
}

Elements in Chrome Inspect Tool

<div class="hasBalance">
  <label class="MuiFormControlLabel-root">
    <span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-143 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary" aria-disabled="false">
      <span class="MuiIconButton-label">
        <input class="PrivateSwitchBase-input-146" type="checkbox" data-indeterminate="false" value="">
        <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
          <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
        </svg>
      </span>
      <span class="MuiTouchRipple-root"></span>
    </span>
    <span class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1">Has Balance</span>
  </label>
</div>

The goal is to change the background-color / fill-color of the unchecked Material-UI checkbox to white. Thank you.