Tips for adjusting the color of the white tick in Material UI Checkbox with React and JavaScript

I'm currently attempting to customize the default white tick (not the checkbox background!) and change it to a different color that I choose. While I have come across solutions for earlier versions of MUI and React, I am specifically looking for a solution tailored to MUI v5.14 and React v18.

If you need a reference to the MUI checkbox: https://mui.com/material-ui/react-checkbox/

Although I came across this post, it does not seem applicable to the current versions: Change the tick color in MuiCheckbox material UI

Provided below is a snippet of my code for better understanding:

<Checkbox
  sx={{
    "&.Mui-checked": {
      color: "#E7E4F6", // used 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,
    },
  }}
/>
javascriptreactjscheckboxmaterial-uicustomization

Answer №1

The color of the tick itself is not defined as it is simply an illusion created by the svg path. To change its color, you would need to create your own custom svg.

However, there are some clever tricks that can give the appearance of a color change. The method you referred to is still effective, although the specific styling tools or class names may vary.

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

.MuiCheckbox-root.Mui-checked::before {
    content: "";
    width: 18px;   // ensure correct size for svg
    height: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: red;   // customize tick color here
    z-index: -1;
}

You can implement this using sx, styled component, or theme component styles... with any preferred tool.

Answer №2

Utilize the following code snippet:

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

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

After attempting to refresh the webpage with the F5 key, I noticed that the jQuery progress bar was not functioning properly. Additionally, the webpage failed to display any

Trying to implement a web loading bar using jQuery on my website was initially successful, but I encountered an issue when reloading the page with F5. The progress bar would not work and the webpage displayed only a white background. Below is the code snip ...

javascripthtmljquerycss

Arranging HTML components in Vue.js using v-for loop

Recently, I started using vue.js and I have a requirement where I need to display an HTML structure based on API data. The structure should look like this: <div class="row"> <div><p>text1</p><img src="{{imgurl1}}" /></di ...

javascripthtmlvue.js

Having trouble with React npm start: 'No chokidar version found' error occurring

After cloning my React-Typescript app on Github Pages and attempting to make some changes, I encountered an issue. Despite running npm install to install all dependencies, when I tried to run npm start, I received the following error message: https://i.st ...

reactjstypescriptnpmchokidar

AngularJS's ScrollTo function allows users to scroll to a specific

Trying to implement a quick nav that smoothly scrolls to different sections on the page when a link is clicked. Currently using a guide provided by Treehouse for reference. $("#quickNav a").click(function(){ var quickNavId = $(this).attr("href"); ...

javascriptjqueryangularjsscrollanchor

Jquery Timer that can be toggled on and off with a single button

I'm really struggling to find a way to make this work smoothly without any bugs. The button in the code below is supposed to perform three actions: Initiate a countdown when clicked (working) Stop the countdown automatically and reset itself when it ...

javascripthtmljquery

Dealing with data manipulation in the realm of javascript

In the following code snippet, I am iterating through multiple URLs and extracting data (title and content) from each of them. My objective is to store this data for later use on another page, and thus it needs to be accessible using its respective title, ...

javascriptjsonpuppeteer

Testing a cucumber scenario by comparing the redirect URL with a different URL

Currently, I am working on writing Cucumber tests for my project. One issue I have encountered is that when clicking a certain button in my code, it redirects to another page with a fixed URL. How can I retrieve the current URL within the Cucumber test? I ...

javascriptseleniumcucumber

Encountering an issue when trying to dynamically import React Material UI Icons

Hey there, I'm currently working on dynamically loading icons from MUI using the following code snippet: import React from "react"; import * as MuiIcons from "@mui/icons-material"; console.log("MuiIcons: ", MuiIcons); co ...

reactjsmaterial-uivite

having trouble with developing a dropdown menu using jquery

I'm currently creating a drop-down menu for my website and here is the code I'm using: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html dir="ltr"> <head> <met ...

javascriptjquerycssmenu

Locate the nearest date (using JavaScript)

Searching for the nearest date from an XML file. <?xml version="1.0" encoding="UTF-8"?> <schedule> <layout fromdt="2014-01-01 00:00:00" todt="2014-01-01 05:30:00"/> <layout fromdt="2014-02-01 00:00:00" todt="2014-01-01 05 ...

javascriptjqueryhtmldatedatetime

Having trouble with the containerElement in React material-ui's MenuItem component?

I'm having an issue with the code below: <MenuItem primaryText="home" containerElement={<Link to="/" />} /> Despite following discussions on other platforms like this one Material UI Menu using routes, adding the containerElement prop to ...

reactjsreact-routermaterial-ui

Send a Date Object through an Event Emitter to be used in a Date Picker

I created a personalized Date Picker Child Component, and when the onDateChange event occurs, I intend to send an event to the parent component. @Output() selectedDateChange = new EventEmitter<Date>(); onDateChange($event) { this.selectedDateCha ...

javascriptangulardatepicker

Examining the array to ensure the object exists before making any updates in the redux

Is there a way to determine if an object exists in an array and update it accordingly? I attempted to use the find method, but it couldn't locate the specified object. I also tried includes, but it seems to be unable to recognize the item within the ...

reactjstypescriptredux

Is there a way to achieve the same task with Ajax?

Hey there, I am new to the world of JavaScript and AJAX. I have been reading about how to convert a client-side JavaScript variable into a server-side PHP variable by using AJAX. Can someone please provide me with a code snippet using AJAX for this purpose ...

javascriptphpjqueryajax

Tips for building a dynamic filter in AngularJS

data = {key:0, Name:"Arun", key:1, Name:"Ajay", key:3, Name:"Ashok"} function dynamicfilter(data, fieldName, filtervalue){ $filter('filter')(data, { fieldName: filtervalue }); } Having trouble implementing a dynamic filter in AngularJS? I&a ...

javascriptangularjs

Angular UI grid: Arranging numbers in a straight line at the decimal point

I am interested in aligning decimal numbers in Angular UI Grid as shown below. 11.293 .89 233424 .34345 I have considered different approaches such as using a cell template with aligned divs or transparent 0s. Has anyone successfully imp ...

javascripthtmlcssangularjsangular-ui-grid

Material UI: After upgrading to version 5, the priority of useStyles (makeStyles) has been reduced

After upgrading to Material Ui version 5, I noticed that all my styles were being given lower priority in the stylesheet. const useStyles = makeStyles((theme) => ({ drawer: { [theme.breakpoints.down('md')]: { width: 0, ...

reactjsmaterial-ui

Get a CSV file through EmberJs

I have been experimenting with various function calls, but I am unable to figure out how to initiate a CSV download in EmberJs. Below is the most recent code I have tried: let endpoint = '/api/foo/'; let options = { url: endpoint, type: ...

javascriptajaxcsvember.js

Perform an update followed by a removal操作

I've been facing a persistent issue that has been troubling me for quite some time now. The setup involves a database in MariaDB (using WAMP) and an API in ExpressJS. Within the database, there are two tables: "menu" and "item," with a foreign key rel ...

javascriptnode.jsexpressasynchronousbdd

Expanding a Landy react app to smoothly transition to a different page with the Router model

I am seeking assistance in updating the Landy out of the box application from https://github.com/Adrinlol/landy-react-template In a standard React/Javascript model, I would typically write code like the following: <Route path='/thanks' exact ...

reactjsreact-native