Material-UI React: Global theme override for Paper component - reactjs

Question

I have a React app built with the latest Material-UI component library.
I use many instances of the Paper component. I want to apply margins and padding to all them at once, without manually repeating this process for every instance.
I looked up the Material-UI documentation on the topic, and from what I can tell, the following code should correctly override how Paper looks:
const theme = createMuiTheme({
overrides: {
Paper: {
root: {
padding: '10px',
marginBottom: '10px',
},
},
},
});
Below is where overridden style should apply:
<ThemeProvider theme={theme}>
{/* ... */}
<Paper>
Content goes here
</Paper>
{/* ... */}
</ThemeProvider>
But the overridden values aren't being applied. Any suggestions as to what's going on?
Thanks!

Answer 1

in your App.js add (please note MuiPaper and not Paper):
const theme = createMuiTheme({
overrides: {
MuiPaper: {
root: {
padding: '10px',
marginBottom: '10px'
},
},
}
});
at the same App.js file, wrap your HTML:
class App extends Component {
render() {
return (
<MuiThemeProvider theme={theme}>
<div className="App">
<YourComponent1 />
<YourComponent2 />
...
</div>
</MuiThemeProvider>
);
}
}
this way, any Paper component rendered by React will have your CSS.
BTW, I created MUI schematics module which adds Material UI support, generates several Material UI components automatically and adds general theme rules in App.js. You are welcome to take a look / try it...

Answer 2

You can also use your CssBaseline component if you're already using it for global reset...all depends on how you're structuring your theme.
Eg below is from the Mui docs:
<CssBaseline.js>
const theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
'#global': {
html: {
WebkitFontSmoothing: 'auto',
},
},
},
},
});
// ...
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
);
You can get more details from the docs here using CssBaseline to inject global theme overrides.

Answer 3

I found out the problem.
The internal component name used for CSS is MuiPaper, not simply Paper. The following produces the desired result:
overrides: {
MuiPaper: {
root: {
padding: '10px',
marginBottom: '10px',
},
},
},

Answer 4

createMuiTheme is depreciated in MUI5.
Instead, you should be using createTheme as follows:
export const myTheme = createTheme({
components:{
MuiPaper:{
defaultProps:{
sx:{
padding: '10px',
marginBottom: '10px'
}
}
}
}
})
Additionally, make sure that you wrap your app in the Theme component and add the CssBaseline component:
import { ThemeProvider } from '#mui/material';
import { myTheme } from './themes/my-theme';
import CssBaseline from '#mui/material/CssBaseline';
<ThemeProvider theme={myTheme}>
<CssBaseline />
<MyApp/>
</ThemeProvider>
Here is the official documentation for MUI5