Actualmente estoy usando modal para algún uso en mi formulario de autenticación. Sin embargo, tengo problemas con el css.

Actualmente, el modal se encuentra en un proveedor de temas:

 <ThemeProvider theme={theme}> ... <Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" > <Box sx={{ width: 400 }} style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", width: 400, border: "2px solid #000", boxShadow: 24, p: 4, }} > <Typography id="modal-modal-title" variant="h6" component="h2"> Verification </Typography> <p>Please enter the verification code sent to your email.</p> <TextField label="Standard" variant="standard" onChange={(e) => setVerifyCode(e.target.value)} ></TextField> <Button variant="outlined" onClick={() => handleVerify(verifyCode)}> Verify </Button> </Box> </Modal> </ThemeProvider>

donde escribo el tema personalizado:

 const theme = createTheme({ palette: { mode: "dark", primary: { main: "#bda06a", }, secondary: { main: "#f5f200", }, }, typography: { fontFamily: "Cormorant", //fontFamily: "Castellar", }, modal: { bgcolor: "#ffffff", //even if i write this it doen not work. }, });

Sin embargo, como se muestra en la imagen, el fondo semitransparente estropea todo. Me preguntaba cómo cambiar el estilo (y dónde) para que el modal muestre su contenido muy claramente. ¡Apreciaría mucho si alguien pudiera ayudar!