0
325
VistasHow to show 3 components in react header? Seems like they are currently mutually exclusive
I'm trying to show 3 components in react header so that the UI will be like so: 
The header should include 3 components which are (1) Cash balance: 123, (2) Asset balance: 123 and (3) the notification component as you can see on the right.
Additionally, (1) Cash balance: 123, (2) Asset balance: 123 should be in the middle of the header bar.
However, seems like the header can only show 1 component now, whenever I add a new component, for example,<h5>Hi</h5>to the header with the code like below:
return (
<Fragment>
<header className={classes.root}>
<h5>Hi</h5>
<HeaderNotification />
</header>
</Fragment>
);
The notification will be gone, and shows this:
May I ask why would this happen and how could I show 3 components in react header?
Much appreciated.
To supplement, JSS styling for root is
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 Respuestas
Responde la pregunta0
The HeaderNotification is most likely present, but being pushed down by the h5-tag.
You could check this in the element inspector in your browser.
Try changing the width and height of the h5-tag and the HeaderNotification, or changing them to display: inline
return (
<Fragment>
<header className={classes.root}>
<h5 style={{width: '10%'}}>Hi</h5>
<HeaderNotification style={{width: '10%'}}/>
</header>
</Fragment>
);