When using Material UI's MUI library for React, I encountered an issue with the checkbox checkmark color. By default, the checkmark takes on the background color of the container element, which is great for light backgrounds but not ideal for dark ones. I wanted the checkmark to be white on dark backgrounds. How can this be achieved?
I attempted to change the checkmark color by setting the color, but that only affected the accent color, not the actual checkmark. Setting the backgroundColor resulted in a thick white border around the checkbox.
In my quest for a solution, I even tried creating custom icons from SVG, but I couldn't figure out how to apply all the necessary CSS classes used by MUI for icons.
While exploring options from MUI's icon library, none seemed to support controlling both the background color and the checkmark color simultaneously.
As a last resort, I resorted to a cumbersome workaround of positioning a <div> behind the checkbox, but it failed when the checkbox wasn't checked. Surely there must be a more elegant solution to tackle this problem!
Check out the sandbox: https://codesandbox.io/s/mui-checkbox-check-mark-color-ss9dr6
<div
className="App"
style={{ color: "white", backgroundColor: "#333", padding: 20 }}
>
<div>How to get a MUI checkbox with a white checkmark?</div>
<Checkbox
defaultChecked
sx={{
"& .MuiSvgIcon-root": {
fontSize: 28,
color: "green",
backgroundColor: "white"
}
}}
/>
<Checkbox
defaultChecked
sx={{
"& .MuiSvgIcon-root": { fontSize: 28, color: "green" }
}}
/>
<div>
Desired: white check mark (like left example above) but without the
white border.
</div>
</div>