0
312
VistasCómo hacer que los textos aparezcan debajo de los íconos en los Botones (Material UI)
Básicamente, este es mi Botón en este momento
Quiero que el texto del Dummy Button aparezca debajo del ícono, ¿cómo hago eso?
Aquí está mi código
<Button className={classes.dummyButton}> <Image src="/buttonImage1.webp" alt="buttonimage1" width={48} height={48} /> <span>Dummy Button</span> </Button>Estilos.js
dummyButton: { backgroundColor: 'green', },
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Desea configurar display: 'flex' y flexDirection: 'column' para la ubicación de elementos de dirección de columna dentro de su botón:
dummyButton: { backgroundColor: 'green', display: 'flex', flexDirection: 'column' },
·
Juan Pablo Isaza
Denunciar
0
intente agregar una etiqueta <br /> entre la imagen y el div. Esto es lo que quise decir. Esto te ayudara https://codepen.io/ash_000001/pen/OJOQaGp?editors=1100
<Button className={classes.dummyButton}> <Image src="/buttonImage1.webp" alt="buttonimage1" width={48} height={48} /> <div>Dummy Button</div> </Button> Styles.js dummyButton: { backgroundColor: 'green', },
·
Juan Pablo Isaza
Denunciar
0
Creo que puedes poner tu etiqueta de imagen en otro lapso y cambiar su visualización a block .
Prueba esto:
<Button className={classes.dummyButton}> <span className={classes.mySpan}> <Image src="/buttonImage1.webp" alt="buttonimage1" width={48} height={48} /> </span> <div>Dummy Button</div> </Button>y sus estilos de clase deberían ser así:
.mySpan { display: 'block' }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta