How to properly set the background of Container or other MUI Components?

Question

Hi I'm migrating my code to MUI components and I'm having quite the difficulty to style it, I haven't fine any references for Container MUI component for example but I have found for Box, Cards, Paper, etc etc... and I wanted to know how to do it for the Container

This is my attempt of styling lol

and this is what I wanna achieve (I did my best to edit that lol)

My code, I do not know if I'm "boxing" things correctly but I think I do in this particular case, also I'm using pl to add some padding to the left because wasn't able to center it properly neither but that at least fixed the issue temporally. (I did try alignitems and all that stuff but it just ignores it)

<Container fixed bgcolor = "#f2f6fc" >
     <Box  bgcolor = "#f2f6fc" mb={2} pt={2} sx={{textAlign:'center'}}>
     <Button 
     startIcon = {<HouseSharpIcon />} 
     variant = "contained" 
     color = "secondary" 
     size = "medium" 
     onClick={goHome} >
     Regresar
     </Button>
     </Box>
     
     <Box bgcolor = "#f2f6fc" pl={45} sx={{textAlign:'left', width: "500px"}}>
     <Card   >
     <CardContent>
       <Typography variant = "h5"  gutterBottom>
       Listado de libros por estudiante
       </Typography>
       <Typography variant="h6" component="div">
       Acudiente: {user.displayName}
       </Typography>
       <Typography variant="h6" component="div">
       Estudiante: {nombre}
       </Typography>
       <Typography variant="h6" component="div">
       Datos del estudiante:
       </Typography>

       <Typography >
       Colegio: {colegio} 
         <br />
         Grado: {grado}
       </Typography>
     </CardContent>
     </Card>      
     </Box>

     <Box bgcolor = "#f2f6fc" pt={2} mb={2} pl={30} sx={{height: '650px', width: "780px", textAlign:'center'}}>
     <DataGrid
       rows={librosNuevos}
       columns={columns}
       pageSize={20}
       rowsPerPageOptions={[20]}

       checkboxSelection
       //Store Data from the row in another variable
       onSelectionModelChange = {(id) => {
         setSelectionModel(id);
         const selectedIDs = new Set(id);
         const selectedRowData = librosNuevos.filter((row) =>
           selectedIDs.has(row.id)
         );
         setLibrosID1(selectedRowData)
       }
     }
       {...librosNuevos}
       
     />
     
     </Box>
     </Container>

Answer 1

I hope you already found the answer, but still if someone is looking for this here's what I use :

<Container style={{ background: '#f2f6fc' }} >