Menu
I am using MUI in my project, and I have a Checkbox within a div with a black background. But it doesn't look good because the Checkbox is black too. How can I change the color of the Checkbox from black to another color?
935
import { withStyles } from '@material-ui/core/styles'; import Checkbox from '@material-ui/core/Checkbox'; const checkBoxStyles = theme => ({ root: { '&$checked': { color: '#3D70B2', }, }, checked: {}, }) const CustomCheckbox = withStyles(checkBoxStyles)(Checkbox);
“:hover” is used to style the checkbox when user hovers over it. Notice that when the mouse pointer move over the checkbox the color of it changes to yellow. “:active” is used to style the checkbox when it is active. Notice that when click the checkbox it will first notice a red color and then the green color.
To customize the color of a checkbox in React Material UI, we can set the style prop to an object with the color we want. We set the style prop of the Checkbox to an object with the color of the checkbox. Next, we set the label color by setting the style prop to an object with the color of the label.
This is how you do it:
<FormControlLabel control={ <Checkbox checked={cryon} onChange={this.handleChange('cryon')} style ={{ color: "#00e676", }} value="cryon" /> } label={<Typography variant="h6" style={{ color: '#2979ff' }}>Work</Typography>} /> 
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
