Allow using linear-gradient color in theme palette

[vimutti77]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Allow using linear-gradient color in theme palette or allow to use it if it is non-default palette

Examples 🌈

I try to use linear-gradient in palette, but I got MUI: Unsupported 'linear-gradient(-39deg, #4991f8 0%, #4bc1ff 100%)' color.
https://codesandbox.io/s/determined-fermat-mikfcs?file=/src/App.tsx

Motivation 🔦

My client wants to use linear-gradient as one of background of button.

[siriwatknp]

I see that the docs are lacking this info. We should mention that the palette.*.(light|main|dark) will be used to calculate channel colors (I think this should be fixed to only apply to the default palette)

@vimutti77 to make the background works, you need to use background, not bgcolor (this is how CSS works). https://codesandbox.io/s/silent-sun-onmj8f?file=/src/App.tsx

[vimutti77]

@siriwatknp If the channel color is an issue, Can I just specify it, so it does not need to be calculated at runtime?

However, my current approach is to use a different key customPalette instead of Palette. And using custom button to get the color from theme.

https://codesandbox.io/s/suspicious-haze-svgxrp

But I need to make sure that when a new version of @mui comes out, this approach will still work.

[siriwatknp]

@vimutti77 Looks like you are trying to create a custom palette. Here is my suggestion:

• All of the color tokens should live in colorSchemes.(light|dark).palette.* to get the benefit of the sx prop. When you write sx={{ bgcolor: 'custom.main' }}, the value will resolve correctly. This PR will fix the issue.

  However, the sx prop does not work with background yet, so you can't do this sx={{ background: 'gradient.primary' }}.

• I think the gradient should just be color tokens and theme each component to use the gradient selectively.

  const GradientButton = ({ color = "primary" }: CustomButtonProps) => {
     return (
       <Button
         sx={{
           background: (theme) => theme.vars.palette.gradient[color].main,
           "&:hover": {
             background: (theme) => theme.vars.palette.gradient[color].dark
           }
         }}
         variant="contained"
       >
         test
       </Button>
     );
   };

[Vansh-Baghel]

@vimutti77 Looks like you are trying to create a custom palette. Here is my suggestion:

• All of the color tokens should live in colorSchemes.(light|dark).palette.* to get the benefit of the sx prop. When you write sx={{ bgcolor: 'custom.main' }}, the value will resolve correctly. This PR will fix the issue.
  However, the sx prop does not work with background yet, so you can't do this sx={{ background: 'gradient.primary' }}.
• I think the gradient should just be color tokens and theme each component to use the gradient selectively.

  const GradientButton = ({ color = "primary" }: CustomButtonProps) => {
     return (
       <Button
         sx={{
           background: (theme) => theme.vars.palette.gradient[color].main,
           "&:hover": {
             background: (theme) => theme.vars.palette.gradient[color].dark
           }
         }}
         variant="contained"
       >
         test
       </Button>
     );
   };

Experimental_CssVarsProvider and experimental_extendTheme didn't work for me who is using ReactJs.
I tried using it, but the site was just crashing.
Then I used createTheme and ThemeProvider, and now it works fine :

import { createTheme , Box, Typography, Button, ThemeProvider } from "@mui/material";

 const theme = createTheme({
    palette: {
      gradient: {
        main: "linear-gradient(-39deg, #4991f8 0%, #4bc1ff 100%)",
        mainChannel: "0 0 0",
        light: "linear-gradient(135deg, #4aaffd 0%, #4992f8 100%)",
        lightChannel: "0 0 0",
        dark: "linear-gradient(135deg, #4cc2ff 0%, #4aa0fa 100%)",
        darkChannel: "0 0 0",
        contrastText: "#fff",
        contrastTextChannel: "0 0 0"
      }
    }
});
const Rewards = () => {
  return (
            <ThemeProvider theme={theme}>
              <Box sx={{ width: "80%" }}>
                <Button
                  sx={{ background: (theme) => theme.palette.gradient.main }}
                  variant="determinate"
                  value={progress}
                />
              </Box>
            </ThemeProvider>
)

export default Rewards;

[siriwatknp]

Experimental_CssVarsProvider and experimental_extendTheme didn't work for me who is using ReactJs.
I tried using it, but the site was just crashing.

Could you share a CodeSandbox to me so that I can take a look the error?

[Vansh-Baghel]

My bad, it is working. I was directly giving the color to the background rather than using sx. It does work.
https://codesandbox.io/s/affectionate-rui-tj5hnk?file=/src/App.js

[mpanjato-andri]

Hello all, i want to use gradient in my icon material ? is it possible ?
For example for FavoriteIcon (import FavoriteIcon from '@mui/icons-material/Favorite'), i want to use gradient its color.