0
316
ViewsCó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 answers
Answer question0
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
Report
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
Report
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
Report
Answer question