Can you specify light or dark variant when attributing the primary/secondary color to an element?

Question

I am restyling my app to follow the Material UI Theme guidelines and would like to set the colour of a certain element to be the Light variant of my Primary colour.

Is there a way to specify this via the color attribute?

For example, this sets the element's colour to be the main variant of my Primary:

<DeleteIcon color="primary" />

I attempted to guess the possible syntax for variations, such as:

<DeleteIcon color="primary[100]"/>
<DeleteIcon color="primary[light]"/>
<DeleteIcon color="primary" shade="light"/>
<DeleteIcon color="primary light"/>

None of these have the desired effect.

My Primary and Secondary colours are custom (I am not using any of the @material-ui/core/colors/HUE colours) and I've read the docs below, which is where some of my attempts came from:

Is it possible to do what I am describing? Or do I have to use classes (which is how I'm currently doing styling, but trying to avoid) if I want to have granular control of the colour like this?

Thanks in advance for your help!

hsimah hsimah · Accepted Answer · 2019-03-31T20:00:07

You're limited in what colours to provide via the props:

  /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),

But if you look at the source code you can see the class name properties MaterialUI is using and override them accordingly:

/* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
containedPrimary: {
    color: theme.palette.primary.contrastText,
    backgroundColor: theme.palette.primary.main,
    '&:hover': {
        backgroundColor: theme.palette.primary.dark,
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
            backgroundColor: theme.palette.primary.main,
        },
    },
},

As you can see this will let you style (in this case a button) how it should look with the primary colour set.

Can you specify light or dark variant when attributing the primary/secondary color to an element?

1 Answers