How to style body element in materialUI

Question

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

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

Answer 1

You can apply the styles to the body using @global class like this:

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

function MyThemeProvider({ children }) {
  useGlobalStyles();
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

function App() {
  return (
    <MyThemeProvider>
      <Button variant="contained" color="primary">
        Button
      </Button>
    </MyThemeProvider>
  );
}

If you create the project by create-react-app, you can also use css/scss module to style any element globally:

/* styles.css */
body {
  color: white;
  font-size: 15px;
}

import React from "react";
import Button from "@material-ui/core/Button";
import "./styles.css";

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

Live Demo

Answer 2

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

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>

Further Reading: Global Styles with React and Material UI

Answer 3

In Material-UI v5 there are two ways to do this:

With the GlobalStyles component:

import * as React from 'react';
import GlobalStyles from '@material-ui/core/GlobalStyles';

export default function App() {
  return (
    <React.Fragment>
      <GlobalStyles styles={{ h1: { color: 'grey' } }} />
      <h1>Grey h1 element</h1>
    </React.Fragment>
  );
}

Edit on CodeSandbox

---

Or if you are already using the CssBaseline component for setting baseline styles:

import { ThemeProvider, createTheme } from '@material-ui/core/styles';

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        h1 {
          color: grey;
        }
      `,
    },
  },
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <h1>Grey h1 element</h1>
    </ThemeProvider>
  );
}

Edit on CodeSandbox

---

From the official docs: Global CSS Override