Set grey background around main area - reactjs

Question

I am trying to get the look of this app using material ui:
Currently, my app looks like this:
There are a few things I need to do. Put some kind of box around the Keyword Processor text, put a box around the stuff below it, set background colour of central area boxes to white and have the background area of the rest to grey.
Any ideas how to modify my code below to do this?
<ThemeProvider theme={theme}>
</ThemeProvider>
<div>
<ThemeProvider theme={theme}>
<Container>
{/* <Box bgcolor="primary.main"> */}
<Grid container spacing={2}>
{/* <Grid xs={12}>
<AppBar />
<br />
</Grid> */}
<Grid item xs={12}>
<Typography variant="h6" gutterBottom>
Keyword Processor
</Typography>
{/* <br /> */}
</Grid>
<Grid item xs={6}></Grid>
<Grid item xs={6}>
<Box textAlign="right">
<Button
color="primary"
// mt={5}
onClick={this.inputToOutput}
//**********************
>
A-Z
</Button>
</Box>
{/* <Typography align="right">A-Z Frequency</Typography>{' '} */}
</Grid>
<Grid item xs={6}>
<TextField
label="Input Keywords"
fullWidth
multiline
rows={10}
variant="outlined"
margin="normal"
onChange={this.handleInputText}
defaultValue={defaultInputText}
/>
<br />
<Button
variant="contained"
color="primary"
mt={5}
onClick={this.inputToOutput}
//**********************
>
Parse
</Button>
<Button
variant="contained"
color="secondary"
mt={5}
// onClick={this.parseInput}
>
Clear
</Button>
<br />
<br />
<Checkboxes
handleDedupe={this.handleDedupe}
handleRemoveNumbers={this.handleRemoveNumbers}
handleConvertToLowercase={this.handleConvertToLowercase}
handleOneWordPerLine={this.handleOneWordPerLine}
handleAddCommas={this.handleAddCommas}
handleAddCommasSpace={this.handleAddCommasSpace}
/>
</Grid>
<Grid item xs={6}>
<TextField
label="Output Keywords"
fullWidth
multiline
rows={30}
variant="outlined"
margin="normal"
value={this.state.outputText}
/>
<Button
variant="contained"
color="primary"
mt={5}
onClick={this.clearOutput}
>
Copy
</Button>
<Button
variant="contained"
color="secondary"
mt={5}
onClick={this.clearOutput}
>
Clear
</Button>
</Grid>
<Grid>
<br />
<br />
</Grid>
</Grid>
{/* </Box> */}
</Container>
</ThemeProvider>
</div>
</>```

Answer 1

You don't need to do that all, here is what you can do instead. I believe the theme you added to ThemeProvider is custom, the edit the theme file pallete object to background colors i.e paper and default, the default color is what you need.
Here is mine:
import { createMuiTheme } from '#material-ui/core/styles';
// Main Material UI theme
const theme = createMuiTheme({
palette: {
background: {
paper: '#fff',
default: '#fafafa',
},
},
});
export default theme;
Change '#fafafa' to the color you want.
If you didn't create a custom theme, just copy mine then import it in your ThemeProvider, it will change the background of your body in all your html pages.