React material how to theming body color - reactjs

Question

Is there a way to change the default body color
using CssBaseline in react material?
I don't want using like
typography: {
h2: {
color: "red",
},
},
but globally is this possible ?
I don't find any example.
UPDATE
It works with
const theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
"#global": {
body: {
backgroundColor: "red",
color: "green",
},
},
},
},
});
Watch out you must have CssBaseline nested to MuiThemeProvider
<MuiThemeProvider theme={theme}>
<CssBaseline />
<App />
</MuiThemeProvider>

Answer 1

Here is the example of how you can set background color globally, similarly you can add typography configurations in the theme
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import CssBaseline from "#material-ui/core/CssBaseline";
const theme = createMuiTheme({
palette: {
background: {
default: "#303030"
}
}
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<React.Fragment>
<CssBaseline />
<Your Componennt />
</React.Fragment>
</MuiThemeProvider>
);
}
Hope this works for you :)

Answer 2

Yes, brother, you can override everything globally in material UI, Here I write some Inputs, Buttons, Labels globally.
import React, { Component } from "react";
import { Box, CssBaseline } from "#material-ui/core";
import { createMuiTheme, MuiThemeProvider } from "#material-ui/core/styles";
import App from "../App";
class Layout extends Component {
/**
* Render
*/
render() {
const theme = createMuiTheme({
palette: {
secondary: {
light: "green",
main: "green",
dark: "green",
boxShadow: "none",
},
background: {
default: "red",
},
},
});
return (
<MuiThemeProvider theme={theme}>
<CssBaseline />
<Box component="div">
<App />
</Box>
</MuiThemeProvider>
);
}
}
export default Layout;