How to change indeterminate color of mui checkbox in react js?
December 27, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To change indeterminate color of mui checkbox in React js, set <Checkbox style={{ color: "#9c27b0" }}/>. It will change indeterminate color of mui checkbox.
Today, I am going to show you, how to change indeterminate color of mui checkbox in react js.
Installation
Install the following packages to use label font size in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledMUI material change indeterminate color of mui checkbox example.
The below code is an example of changing indeterminate color of mui checkbox using mui.
App.js
import * as React from 'react';
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
export default function IndeterminateCheckbox() {
const [checked, setChecked] = React.useState([true, false]);
const handleChange1 = (event) => {
setChecked([event.target.checked, event.target.checked]);
};
const handleChange2 = (event) => {
setChecked([event.target.checked, checked[1]]);
};
const handleChange3 = (event) => {
setChecked([checked[0], event.target.checked]);
};
const children = (
<Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
<FormControlLabel
label="Child 1"
control={<Checkbox style={{ color: "#9c27b0" }} checked={checked[0]} onChange={handleChange2} />}
/>
<FormControlLabel
label="Child 2"
control={<Checkbox checked={checked[1]} onChange={handleChange3} />}
/>
</Box>
);
return (
<div>
<FormControlLabel
label="Parent"
control={
<Checkbox
checked={checked[0] && checked[1]}
indeterminate={checked[0] !== checked[1]}
onChange={handleChange1}
/>
}
/>
{children}
</div>
);
}In the above code example, I have used the @mui/material component and changed indeterminate color of mui checkbox of MUI.
Check the output of the above code example.
All the best 👍
