Another approach outlined in the [**Docs > Themes > Globals**][1] section:

> If you are using the [`CssBaseline`][2] component to apply global resets, it can also be used to apply global styles. 

Here's an example:

```ts
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][3] and Stack Snippets





    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"))




    <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>



### Update for MUI 5

Create your theme like this:

```ts
import { createTheme } from "@mui/material";

export const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          backgroundColor: "tomato"
        }
      }
    }
  }
});
```


**Further Reading**: [Global Styles with React and Material UI][4]

[1]: https://material-ui.com/customization/globals/#global-css
[2]: https://material-ui.com/components/css-baseline/
[3]: https://codesandbox.io/s/material-ui-global-styles-xm4p9
[4]: https://stackoverflow.com/q/58755118/1366033

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',
        },
      },
    });

