score:17

Accepted answer

material-ui v5

you can change the body styles by overriding muicssbaseline styles in createtheme():

import cssbaseline from "@mui/material/cssbaseline";
import darkscrollbar from "@mui/material/darkscrollbar";
import { createtheme, themeprovider } from "@mui/material/styles";

const theme = createtheme({
  components: {
    muicssbaseline: {
      styleoverrides: {
        body: {
          ...darkscrollbar(),
          color: "darkred",
          backgroundcolor: "grey",
          "& h1": {
            color: "black"
          }
        }
      }
    }
  }
});

export default function globalcssoverride() {
  return (
    <themeprovider theme={theme}>
      <cssbaseline />
      <content />
    </themeprovider>
  );
}

edit globalcssoverride material demo (forked)

material-ui v4

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

edit 64705335/how-to-style-body-element-in-materialui

score:0

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

score: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>

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


Related Query

More Query from same tag