How to style body element in MUI

I can't find any way to target root elements with the ThemeProvider from MUI.

const theme = createMuiTheme({
  palette: {
    background: {
      default: "#00000",
      backgroundColor : 'black',
      backgroundImage: 'url(/bg.jpg)',
      backgroundPosition: 'center',
      height:'100%'
    },
    primary: {
      light: '#757ce8',
      main: '#fff',
      dark: '#002884',
      contrastText: 'grey',
    },
  },
});

Another approach outlined in the Docs > Themes > Globals section:

If you are using the CssBaseline component to apply global resets, it can also be used to apply global styles.

Here's an example:

import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      "@global": {
        body: {
          backgroundColor: "tomato"
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div className="App">
        <h1>Hello CodeSandbox</h1>
      </div>
    </ThemeProvider>
  );
}

Demo in CodeSandBox and Stack Snippets

<!-- begin snippet: js hide: true console: false babel: true --> <!-- language: lang-js -->

const { ThemeProvider, createMuiTheme, CssBaseline } = MaterialUI

const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      "@global": {
        body: {
          backgroundColor: "tomato",
        },
      },
    },
  },
})

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div className="App">
        <h1>Hello CodeSandbox</h1>
      </div>
    </ThemeProvider>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>

<div id="root"></div>

<!-- end snippet -->

Update for MUI 5

Create your theme like this:

import { createTheme } from "@mui/material";

export const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          backgroundColor: "tomato"
        }
      }
    }
  }
});

Further Reading: Global Styles with React and Material UI