Is there a way to change the color of a checkbox (both the box and font) in the disabled state using material ui

When using Material UI v4.9.12, it is possible to create a customized checkbox with a specific color that remains fixed:

const GreenCheckbox = withStyles({
  root: {
    color: green[400],
    '&$checked': {
        color: green[600],
    },
  },
  checked: {},
})((props) => {
    return <Checkbox {...props} />
  }
)

However, the customization does not affect the font color and only applies when the checkbox is enabled.

Is there a way to change both? What needs to be overridden?

Currently, I have only been able to adjust the icon color using inline styling:

<GreenCheckbox style={{color: green[600]}} onChange={cb} checked={checked} disabled/>

cssreactjsmaterial-ui

Answer №1

To customize the appearance of the disabled state in your checkboxes, you can follow a similar approach as you did for the checked state:

import React from "react";
import ReactDOM from "react-dom";
import { withStyles } from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";
import green from "@material-ui/core/colors/green";

const GreenCheckbox = withStyles({
  root: {
    color: green[400],
    "&$checked": {
      color: green[600]
    },
    "&$disabled": {
      color: green[200]
    }
  },
  checked: {},
  disabled: {}
})(Checkbox);

function App() {
  return (
    <div className="App">
      <GreenCheckbox />
      <GreenCheckbox disabled />
      <GreenCheckbox checked disabled />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/colored-checkbox-2pj77?fontsize=14&hidenavigation=1&theme=dark

Check out these related answers:

  • Changing tick color in MuiCheckbox Material UI
  • Creating a ColoredCheckbox component

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

Adjusting the Material UI Select handleChange function

const handleObjectChange = (event: React.ChangeEvent<{ value: unknown }>) => { const { options } = event.target as HTMLSelectElement; const selectedValues: object[] = []; for (let i = 0, l = options.length; i < l; i += 1) { if ...

reactjstypescriptmaterial-ui

Using AngularJS ng-style to set dynamic background images for different variables

Excuse me if this is a basic question. I am working on designing a login page with a background image, while the other pages don't have this background. I tried using ng-style but couldn't get the style to update when navigating between pages. In ...

cssangularjs

Can't I prevent additional renders using useMemo()?

I am facing an issue with my function-based component that fetches data using redux toolkit and useAppSelector(). I have placed a console.log within the component to monitor its behavior. However, upon refreshing the page, the console.log continues to appe ...

javascriptreactjsreact-hooks

Tips for entering the lowest and highest values into the input field

I am looking to track the daily minimum and maximum prices of shares for various companies. Currently, I'm attempting to utilize this tag: <input type="number" name="number" placeholder="minprice"> <input type="number" name="number" place ...

htmlcss

Div with sidebar that sticks

I am currently working on setting up a website with a sticky sidebar. If you would like to see the page, click this link: On a specific subpage of the site, I am attempting to make an image Validator sticky, but unfortunately, it's not functioning a ...

javascriptjqueryhtmlcss

Guide on creating a CSS shadow for the top and bottom sections of a div

I'm looking to enhance a DIV element by applying a shadow effect using CSS3. To achieve a shadow on the bottom of the DIV, I have utilized the following code: -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75); box-shadow: 0 1px 10px rgba(0, ...

htmlcssshadow

Content Security Policy prevents videos from loading in React applications

I'm encountering an issue while attempting to showcase a video preview within my React application. The error message states: "Refused to load media from 'data:video/mp4;base64,...' because it violates the following Content Security Policy ...

node.jsreactjsexpresscontent-security-policyhelmet.js

The req.body in Express.js appears to be empty when utilizing form-data

snapshot of postman When I send data using form-data in my Express.js application, req.body appears to be empty. However, if I send the data using raw JSON, the expected object is present in req.body. Below is how my setup looks: Here is my index.js file ...

javascriptjavareactjsnode.jsexpress

equal child width as parent column container

I'm in the process of developing a custom dropdown search bar that presents results as the user enters text. One issue I'm facing is that the list of results must have a position: absolute. This causes it to disregard the width of the parent col ...

htmlcsstwitter-bootstrap

Building a loading bar using dots

<span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot">< ...

javascriptjqueryhtmlcss

Tips on introducing a random pattern into a Javascript gaming experience

To kick off the game, let's generate a pattern randomly. Follow these steps: -Include a function that generates the pattern. (Hint: JavaScript's Math.random function might come in handy) -Invoke your new function from the startGame function I&a ...

javascripthtmlcss

Tips for toggling the visibility of a <div> element with a click event, even when there is already a click event assigned

No matter what I try, nothing seems to be working for me. I'm looking to hide the <div id="disqus_thread"> at first and then reveal it when I click on the link "commenting", after the comments have loaded. This particular link is located at the ...

javascriptcssajaxshow-hideblogger

When attempting to launch a React Native project, an error stating that the index.js file could not

As a newcomer to ReactNative, I am encountering an issue that I need assistance with. Upon attempting to run my ReactNative project using the command: react-native run-android I received the following error log: Error: The module ./index could not be ...

node.jsreactjsreact-nativenode-modules

Adjusting widths of strokes in React Native Vector Icons

I selected an icon from the react-native-vector-icon library. For instance, let's use featherIcons. How can I include a stroke-width property to the react-native-vector-icons package? import FeatherIcon from 'react-native-vector-icons/Feather&ap ...

javascriptreactjsreact-nativereact-native-vector-icons

What steps should I follow to ensure that TypeScript is aware of the specific proptypes I am implementing?

Is there a way to instruct TypeScript on the prop types that a component is receiving? For example, if multiple is set to true, I would like TypeScript to expect that selectValue will be an array of strings. If it's not present, then TypeScript should ...

reactjstypescript

Can the CSS of an iframe be modified if the iframe is located on a different domain?

Is it feasible to modify the CSS of an iframe if the iframe is not located on the same domain? If so, what are some ways to apply and alter CSS for this situation? Any assistance would be greatly appreciated. <iframe id="frame1" width="100%" height="35 ...

javascriptjqueryhtmlcssiframe

Issue with applying fontFamily in React / Next.js 9

Issue Description I'm facing an issue with my Next.js application where I am unable to change the font family of a <p> element using in-line styles. Oddly, when I attempt to apply a color: 'red' style, it works without any problems. ...

reactjsjsxnext.js

Media queries do not trigger the execution of CSS code

I am currently working on making a desktop-sized website responsive. However, I have encountered an issue where the CSS rule is being read by the browser but not executed, regardless of whether the media query rule is true or not. I have already included & ...

cssmedia-queriesresponsive

Removing extra spaces from a hyperlink using CSS

Can CSS be used to remove extra whitespaces? Within the code snippet provided, there is an additional whitespace in the <a> tag. This link is generated by a WordPress plugin and I prefer not to make changes directly to the source files of the plugin. ...

css

What are the methods used to optimize fetching on a React Gatsby website?

Within the Gatsby React setup of a website, there is a NavbarExtra component on the front page that displays dynamic data fetched from an API. This data refreshes multiple times throughout the day. The goal now is to optimize the fetching process in order ...

javascriptreactjsgatsby