Linear-graident MUI theme background just goes white

Question

I am trying to make the background a gradient linear color based on theme but it keeps just going white? I will be reusing this many times so if there is a way to have it in theme it would be great but right now it just doesn't work? Code Sandbox example showing it works with hex colors and also displays the problem. The working part is commented out to display the problem better. CodeSandbox: https://codesandbox.io/s/headless-sound-2fghf8?file=/src/App.js:1088-1761

export default function ToggleColorMode() {
  const [mode, setMode] = React.useState("light");
  const colorMode = React.useMemo(
    () => ({
      toggleColorMode: () => {
        setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
      }
    }),
    []
  );

  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode,
          background: {
            default:
              mode === "dark"
                ? "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
                : "#FF0000"
            //This works perfectly default:mode === "dark"? "#0000FF": "#FF0000"
          }
        }
      }),
    [mode]
  );

Answer 1

linear-gradient is a special type of image, not color. that's why you can't set it under palette

you can set background for a specific component:

createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        contained: {
          background:
            mode === 'dark'
              ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
              : '#FF0000',
        },
      },
    },
  },
})