How to use light secondary color in material-ui

Question

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!

Answer 1

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>
);