0
271
VistasInterfaz de usuario de material: ¿el texto sale del contenedor/caja?
Tengo una Alert donde muestra cadenas largas. Aquí está mi código:
<Container maxWidth="md"> <Box sx={{ mt: 3, border:1}}> <Box> {hasSubmitted ? <div> <Alert sx={{mt:3}} severity="success"> {receivedData} </Alert> </div> : null} </Box> </Box> </Container> Sin embargo, luego aparece así: 
Muy nuevo en Material UI. ¿Cómo puedo arreglar esto? ¡Gracias!
Actualizar
Usé esto en su lugar:
<Typography variant="body2" align="center" style={{ wordWrap: "break-word"}} sx={{mt:3}} > {receivedData} </Typography> Funciona, pero ahora no es una Alert . Creo que el problema está en el componente Alert . Aún así, si alguien tiene alguna solución, todavía estoy abierto para ellos. ¡Gracias!
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
intente usar la propiedad break word css. Leer más aquí
<Container maxWidth="md"> <Box sx={{ mt: 3, border:1}}> <Box style={{width:'100%}}> {hasSubmitted ? <div style={{width:'100%}}> <Alert sx={{mt:3}} severity="success" style={{wordWrap:'break-word', width:'100%}}> {receivedData} </Alert> </div> : null} </Box> </Box> </Container>
·
Juan Pablo Isaza
Denunciar
0
No se recomienda usar accesorios de style , para personalizar el componente Alert use el nombre de clase global o la propiedad styleOverrides, en su ejemplo usé el nombre de clase global:
.MuiAlert-message { min-width: 0; word-wrap: break-word; }Mira esto: https://mui.com/api/alert/#css
·
Juan Pablo Isaza
Denunciar
Responde la pregunta