Change background-color of an unchecked Material-UI checkbox

Question

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.

Answer 1

MUIv5

Accepted answer doesn't work in MUIv5. MuiIconButton-label doesn't exist in Checkbox anymore and it changed the structure of the component.

For anyone struggling with v5, here's my kinda-hacky solution :

import { Components } from '@mui/material'

const MuiCheckbox: Components['MuiCheckbox'] = {
  styleOverrides: {
    root: {
      '& .MuiSvgIcon-root': {
        zIndex: 1,
      },

      '& .PrivateSwitchBase-input': {
        width: 'auto',
        height: 'auto',
        top: 'auto',
        left: 'auto',
        opacity: '1',
        visibility: 'hidden', // optional

        '&::before': {
          content: '""',
          position: 'absolute',
          background: 'white',
          height: "100%",
          width: "100%",
          visibility: "visible" // optional
        },
      }
    },
  },
}

It relies on the fact that the <input> element assumes just the right dimensions and position if we reset its size and positioning attributes. That way the solution is resistant to various paddings and size props applied to the root element of the component. AFAIK it shouldn't break anything, but my experience with MUI is not that long.

Note that I have this solution defined as a global styleOverride in my theme's config and I want this custom background to affect checked tick too - mix and match with Ryan's answer for your scenario.

Visibility attributes are optional, they just make sure the input element stays hidden (I set opacity 1 on it, default is 0). Just make sure you remove both if you don't want them.

Answer 2

Below is an approach that seems to work. This uses the ":after" pseudo-element to place a white background behind the SVG.

import React from "react";
import ReactDOM from "react-dom";
import { withStyles } from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";

const WhiteBackgroundCheckbox = withStyles(theme => ({
  root: {
    color: "red",
    "& .MuiIconButton-label": {
      position: "relative",
      zIndex: 0
    },
    "&:not($checked) .MuiIconButton-label:after": {
      content: '""',
      left: 4,
      top: 4,
      height: 15,
      width: 15,
      position: "absolute",
      backgroundColor: "white",
      zIndex: -1
    }
  },
  checked: {}
}))(Checkbox);

function App() {
  return (
    <div style={{ backgroundColor: "blue" }}>
      <WhiteBackgroundCheckbox />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Related question: Change the tick color in MuiCheckbox material UI