0
581
Views¿Cómo cambiar el color de fondo y el desenfoque mui5 modal?
Estoy usando mui5 modal, el fondo modal es negro claro.
Código modal Mui
¿Necesito cambiar el desenfoque de fondo y el blanco? Adjunté la salida necesaria a continuación
·
Juan Pablo Isaza
2 answers
Answer question0
Para agregar el desenfoque, agregue este estilo al Modal:
<Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" style={{ backdropFilter: "blur(5px)" }} >y para el color de fondo cambie los estilos de Caja:
const style = { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", width: 400, bgcolor: "background.paper", // Change to whatever color you want border: "2px solid #000", boxShadow: 24, p: 4 }; ... return ( <div> <Button onClick={handleOpen}>Open modal</Button> <Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" style={{ backdropFilter: "blur(5px)" }} > {/* Apply styles here: */} <Box sx={style}> <Typography id="modal-modal-title" variant="h6" component="h2"> Text in a modal </Typography> <Typography id="modal-modal-description" sx={{ mt: 2 }}> Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </Typography> </Box> </Modal> </div> );Para el color de fondo fuera del modal, cambie los estilos del Modal:
style={{ backdropFilter: "blur(5px)", backgroundColor: "rgb(200, 0, 0, 0.5)" }}
·
Juan Pablo Isaza
Report
0
Usando sx prop directamente en el componente Modal:
<Modal sx={{ "& > .MuiBackdrop-root" : { backdropFilter: "blur(2px)" } }} open={open} onClose={handleClose} . . />
·
Juan Pablo Isaza
Report
Answer question