0
320
Views¿Cómo mostrar 3 componentes en el encabezado de reacción? Parece que actualmente son mutuamente excluyentes.
Estoy tratando de mostrar 3 componentes en el encabezado de reacción para que la interfaz de usuario sea así: 
El encabezado debe incluir 3 componentes que son (1) Saldo de efectivo: 123, (2) Saldo de activos: 123 y (3) el componente de notificación como puede ver a la derecha. Además, (1) Saldo de efectivo: 123, (2) Saldo de activos: 123 debe estar en el medio de la barra de encabezado.
Sin embargo, parece que el encabezado solo puede mostrar 1 componente ahora, cada vez que agrego un nuevo componente, por ejemplo, <h5>Hi</h5> al encabezado con el siguiente código:
return ( <Fragment> <header className={classes.root}> <h5>Hi</h5> <HeaderNotification /> </header> </Fragment> ); La notificación desaparecerá y muestra esto: 
¿Puedo preguntar por qué sucedería esto y cómo podría mostrar 3 componentes en el encabezado de reacción? Muy apreciado.
Para complementar, el estilo JSS para root es
root: { "position": "fixed", "top": "0", "left": "0", "width": "100%", "height": "6rem", "backgroundColor": "#8a2b06", "color": "white", "display": "flex", "justifyContent": "space-between", "alignItems": "center", "padding": "0 10%", "boxShadow": "0 2px 8px rgba(0, 0, 0, 0.25)", "zIndex": "10", "margin": "0px 260px 0", }1 answers
Answer question0
Lo más probable es que HeaderNotification esté presente, pero la etiqueta h5 la empuja hacia abajo.
Puede verificar esto en el inspector de elementos en su navegador.
Intente cambiar el ancho y el alto de la etiqueta h5 y HeaderNotification , o cámbielos para display: inline
return ( <Fragment> <header className={classes.root}> <h5 style={{width: '10%'}}>Hi</h5> <HeaderNotification style={{width: '10%'}}/> </header> </Fragment> );