To incorporate gradient values into your theme, you can do the following:
const theme = createMuiTheme({
palette: {
primary: {
main: '#ff4400',
mainGradient: "linear-gradient(to right, tomato, cyan)",
},
// ...
},
});
Then, utilize this value by applying it to components using the style prop:
<AppBar
position="static"
style={{ background: theme.palette.primary.mainGradient }}
> ...
UPDATE
This method may seem like a workaround, but for now, it appears to be the only solution available. There are no documented examples of this in the MUI documentation. Additionally, examining the source code of the <AppBar /> component reveals that using linear gradients with main, light, or dark colors is not supported:
export const styles = theme => {
//...
return {
/* ... */
/* Styles applied to the root element if `color="primary"`. */
colorPrimary: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
},
/* Styles applied to the root element if `color="secondary"`. */
colorSecondary: {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText,
},
};
};
As shown above, backgroundColor is utilized here, making it invalid to assign linear-gradient(...) to it.