Change the fill color of the MUI CheckBox when it is unchecked

I need to display checkboxes that look like this when unchecked.

https://i.sstatic.net/Z0qHn.png

When the user checks the box, it should change to this:

https://i.sstatic.net/MrVg1.png

I have successfully implemented the second part using the following code:

 <Checkbox
        sx={{
          color: "#DFE0EB",
          // backgroundColor: "#DFE0EB",
          "&.Mui-checked": {
            color: "#1DFB9D"
          }
        }}
      />

However, I am unsure how to fill the checkbox with the color #DFE0EB when it is not checked.

Here is my code

javascriptcssreactjsmaterial-ui

Answer №1

After experimenting with this, I discovered that directly changing the background color may not work due to Mui utilizing an icon for displaying the empty checkbox (tested with Mui: 5.10.5). The silver lining is that you have the ability to customize the icon used for the empty checkbox and specify a fill color for that icon. Unfortunately, it appears that Mui lacks an icon of a filled square (as far as my observation goes), so you might need to resort to a different icon library for that. Modifying the empty checkbox icon can be achieved in the following manner. Additionally, you can also alter the checkedIcon in a similar fashion.

<Checkbox
    sx={{
        color: "#DFE0EB",
        "&.Mui-checked": {
            color: "#1DFB9D"
        }
    }}
    icon={<SquareIconHere style={{fill: '#DFE0EB'}}>}
/>

Answer №2

If you want to display a unique icon:

const CustomIcon = () => (
  <SvgIcon>
    <svg focusable="false" aria-hidden="true" data-testid="CustomIcon">
      <path
        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5"
        fill="white"
      ></path>
    </svg>
  </SvgIcon>
);

<Checkbox icon={<CustomIcon />} />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating multiple documents using Mongoose with a specified condition

I am currently attempting to update all documents within my MongoDB database using Mongoose. While I know this question has been asked before, I have not found the answer that suits my specific needs. I am utilizing version 4.2 I am endeavoring to use upd ...

reactjsmongodbmongoose

Utilizing the ternary operator within meta descriptions for Next.js applications

I'm attempting to make a dynamic meta description using a ternary operator, but I seem to be doing something wrong. If there is an htmlsummary, I want to display that, otherwise I want to display the Summary. <meta name="description" cont ...

reactjsnext.js

Mysterious space found within flexbox elements

There seems to be a mysterious gap between the top red and blue bars. What could I be doing incorrectly? Removing main eliminates the bar, but then the footer moves up? If you'd like to take a look at what's happening, here is a link to my fidd ...

htmlcssflexbox

Guide to automatically updating a table with AJAX requests

My task involves utilizing AJAX to request a random string consisting of 10 numbers from an asp page. The numbers must be delimited by "||" and displayed in a table format. The table is designed to showcase only the top 10 results, with each new row addin ...

javascriptajaxasp-classic

Are only PHP conventions followed when elements with name attributes are sent to the server?

There is a common belief that only elements with a name attribute are sent to the server during page change, with just the element name and its value attribute value moving between client and server. Is this functionality specific to PHP, or does it also e ...

javascriptphpnode.js

having trouble locating npm react version

Here is the error message: unable to resolve dependency tree npm ERR! Found: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0173646062752c656f6541382f342f30">[email protected]</a> npm ERR! node_modules/react-dnd n ...

reactjsnpm

Grails: Javascript function for updating the image source is unresponsive

I have a situation where I need to change the src of an img based on a certain condition. The condition is returning true as expected, as confirmed by an alert() that I added previously. However, the function responsible for changing the src of the img and ...

javascripthtmlajaxgrails

What is the best method to implement an information pop-up for TextInput in React Native?

I'm trying to accomplish a similar layout in React Native: https://i.sstatic.net/69jE6.png The goal is to have a TextInput component with an icon on the right side. When the user clicks the icon, I want to display some text in a modal or another com ...

javascriptreactjsreact-nativeiconsinformation-retrieval

Incorporating VueJS components dynamically into Packery: A step-by-step guide

Hey, I'm encountering an issue with packery. I have each grid-item as a component and in my app.js (main file) I'm initializing packery following this example https://codepen.io/Monocle/pen/ZbeBGL var pckry = new Packery(container, { item ...

javascriptarraysvue.jsvuejs2packery

Issue with JavaScript Replace not replacing second '<' character

I am attempting to swap out the < and > symbols of HTML tags with &gt; & &lt; by utilizing JavaScript. This is the code I am using: var sval = val.replace('&', '&amp;'); sval = sval.replace("<", "&lt;") ...

javascriptjqueryhtmlvisual-studioxss

incorporating an HTML page into a div container

What is the best way to load an HTML page within a div element? I have been using the 'object' tag, but I'm unsure if it's the most efficient method. The HTML page is not external. Would using Dojo be a better solution for this situatio ...

javascripthtmldojo

Invoke actions when clicking outside of components

Currently, I have a HeaderSubmenu component that is designed to show/hide a drop-down menu when a specific button is clicked. However, I am now trying to implement a solution where if the user clicks anywhere else in the application other than on this drop ...

javascripteventsvue.js

What is the best way to add images and icons to an index file in Angularjs 4.0? Do I need to create a separate component for this task?

I've been tasked with adding a menu icon to the index page. The goal is for the menu list, populated with icons, to appear when the icon is clicked and then disappear on mouse out. I'm unsure about how to call images from different folders - shou ...

javascripthtmlangularjs

Issue with Date Time Picker functionality in Material UI on Safari browser

I recently implemented a Date Picker in my application. While it is functioning properly on Android Chrome browser, there seem to be some UI issues when using Safari. Can anyone help me troubleshoot this? <LocalizationProvider dateAdapter={AdapterM ...

iosreactjssafarimaterial-uimobile-safari

Creating flexbox items with equal height

I have a flexbox parent with flex-direction set to row. Within this parent, I have two children that I want to have the same height! Both of these children contain dynamic content with varying heights. The issue I'm facing is that when I add text t ...

cssflexbox

The issue with adjusting the top position in jQuery

As I continued scrolling on my page, I encountered an issue with adjusting the top offset using jQuery on my element. I want the element with id goToLog to become fixed on the page after scrolling 80px. This functionality is working correctly. However, wh ...

jqueryhtmlcss

The height of the text field is being impacted by an error message in the material UI helperText

I've implemented a React hook form, but I'm facing an issue where the error message causes my text field to move up after validation. Here's how it looks This is how I've set up the helperText: <TextField helperText={invalid ...

reactjsreact-hooksmaterial-uitextfieldreact-hook-form

Establishing and attaching a state in React Native

Currently, I am working on a timer application in React Native and aiming to display the elapsed milliseconds using state management. The guide I am referring to is slightly outdated as it uses plain JavaScript instead of ES6, so I took it upon myself to c ...

javascriptandroidreact-native

Placing MySQL information into a container

Currently working on a tutorial and attempting to update the styling. While I understand that the code may not be up-to-date, breaking it down into parts is aiding my comprehension of the whole. I am exploring the idea of inserting MySQL data into divs in ...

phpjqueryhtmlmysqlcss

Experiencing difficulty when handling API requests in React Native

Having trouble displaying API data in React Native even though it works fine in ReactJS project. Can anyone guide me on fixing the issue of data not showing up in React Native and throwing a console error? Error fetching data: [AxiosError: Network Error] ...

reactjs