How to change the white tick color when using Material UI Checkbox (React, JS)

Question

I'm trying to change the default white tick (not the checkbox background!) to some other color of my choice. I've found some solutions for when using an older version of MUI and React. I'm looking for a solution for MUI v5.14 and React v18

MUI checkbox for reference: https://mui.com/material-ui/react-checkbox/

Found this post, but it seems not relevant for the current versions: Change the tick color in MuiCheckbox material UI

Here is part of my code for reference:

<Checkbox
  sx={{
    "&.Mui-checked": {
      color: "#E7E4F6", // for checkbox filling - works correctly
    },
    // "&.Mui-checked::before": {
    //   background: "red !important",
    // },
    ".MuiCheckbox-root": {
          zIndex: 1,
    },
    ".MuiCheckbox-root.Mui-checked::before": {
      content: '""',
      width: 18,
      height: 18,
      position: "absolute",
      left: "50%",
      top: "50%",
      transform: "translate(-50%, -50%)",
      background: "red !important",
      zIndex: -1,
    },
  }}
/>

Answer 1

The tick itself does not have a color. It is not a real thing. The svg path leaves the space in the middle that looks like a tick. You can not change it unless you create your own svg for this.

But you can apply some tricks to make it look like it changes color. The solution you referenced works. DOM, class names or tools used for styling can be different now, but the trick still works.

.MuiCheckbox-root {
    z-index: 1;
}

.MuiCheckbox-root.Mui-checked::before {
    content: "";
    width: 18px;   // you need to know the size of the svg
    height: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: red;   // tick color goes here
    z-index: -1;
}

You can apply this via sx, styled component or theme component styles... with whatever tool you want