I have this theme
palette: {
primary: {
main: '#d05ce3',
},
secondary: {
light: '#0066ff',
main: '#0044ff',
},
I can use secondary color like this find
<ThemeProvider theme={theme}>
<Checkbox
color="secondary"
But how to use the light secondary ? in ThemeProvider
Like color="secondary.light" does not work!
Try this way:
import { makeStyles } from '@material-ui/core/';
import { Typography } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
number: {
color: theme.palette.secondary.main
}
}));
In return
const classes = useStyles();
return(
<div>
<Typography variant="h3" className={classes.number}>
5
</Typography>
</div>
);
You would have to declare a class to your checkbox, and in your css you indicate that you use the color you want. Example:
<ThemeProvider theme = {theme}>
<Checkbox
color = "secondary"
className = {classes.checkboxColor}
/>
CSS file:
checkboxColor: {
color: theme.palette.secondary.light
}