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!

Phototonus

Checkbox only supports strings of "primary", "secondary", or "default" for the color prop. The "light" variation is used automatically for some component aspects (e.g. here in LinearProgress), but it isn't available as a choice in a color prop like this. – Depone

@RyanCogswell Thank you, but If I want to use the light secondary the one I add or the one that is auto generated how to use it? color="secondary.light" ? – Phototonus

What I'm saying is that it isn't possible via the color prop. The only way to achieve this would be to customize the CSS for the Checkbox using withStyles. Alternatively, you could create another theme where you use the lighter color as secondary.main and leverage that new theme for displaying the Checkbox. – Depone

@RyanCogswell I did understand about the checkbox, I meant besides the checkbox, How can I access to secondary.light ? I cannot access it anywhere using the color prop? – Phototonus

Answer 1

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
  }

Eidetic

How do I import the theme.js to my .sass to use theme.palette.secondary.light ? Is there any way I can access my createMuiTheme colors from my sass files? – Phototonus

Answer 2

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

Setula

Answer 3

Try using the Box component.

<Box color='text.secondary'>
...
</Box>

Pillowcase

I haven't got this working on a typography component – Source

Answer 4

It can be done using the sx property which can be applied on the mui components For example

    <Checkbox
        color = "secondary"
        sx={{backgroundColor:"secondary.light"}}
    />

Inebriety