Question 299638 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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

Tags:

2

Answers


  1. 0

    You can use

    style = {{
    color: "#00e676",
    }}

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search