Applying gradient to Material UI's theme background

Question

I am trying to make the default background color of the MuiTheme a gradient, I have the following code:

export const theme = createMuiTheme({
  palette: {
    type: "dark",
    background: {
      default: "linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%)",
    },
  },
})

However I noticed that material-ui sets it as background-color and gradients are not allowed there.
Is there a way to bypass this and have it become background instead?

user_14817088 · Answer

The default theme background is actually applied by the CssBaseline component. You can override the global default styles it use using the overrides property in your theme object.

export const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
         body: {
           background: 'linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%)',
           backgroundRepeat: "no-repeat",
           backgroundAttachment: "fixed",
        },
      },
    },
  },
  palette: {
    type: "dark",
  },
})

CssBaseline

Global CSS

user_4936034 · Answer

If you are using MUI version "^5.8.7", then below should work

import {
  createTheme
} from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          backgroundColor: #FAACA8,
          backgroundImage: `linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%)`,
        },
      },
    },
  }
})

Applying gradient to Material UI's theme background

2 Answers