Customize multiple mui components - reactjs

Question

From MUI's docs you have the ability to customize a component. But is there a way to customize multiple components?
Say I want to customize MuiPaper and MuiList with the same styles.
E.g of customizable components:
const theme = createTheme({
components: {
// Name of the component
MuiPaper: {
defaultProps: {
// The props to change the default for.
backgroundColor: '#101010',
},
},
},
});

Answer 1

there are multiple ways to customize the default props. please check below I have added three ways to customize the components. also you can add more components to it.
theme.js
const mytheme = {
components: {
MuiPaper: {
styleOverrides: {
root: ({ theme }) => ({ // using with theme
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
}),
},
},
MuiList : {
styleOverrides: {
root: { // adding direct CSS properties with screensize condition.
'#media (min-width:600px)': {
minHeight: '4.5rem',
backgroundColor: '#101010',
},
},
},
},
MuiButton: {
styleOverrides: {
root: ({ ownerState, theme }) => ({ // changing only 'contained' variant or adding new variant.
textTransform: 'capitalize',
...(ownerState.variant === 'contained' && {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.light,
}),
}),
},
},
},
};
export default mytheme;
app.js
const App = () => {
<ThemeProvider theme={createTheme(mytheme)}>
...
</ThemeProvider>
}
export default App;