I am displaying some material-ui Cards horizontally in a div from data loaded from the backend and rendered server side using NextJS, however when the action property is present in the CardHeader, the view is distorted.
The distortion is a little bit hard to explain so I have reproduced it minimally in CodeSandbox. After removing the action property, the items are rendered correctly, however you will need to reload the mini-browser to see the effect.
<CardActionArea>
<Card>
<CardHeader
avatar={<Avatar alt={value}>{value}</Avatar>}
/** If action is removed, the issue goes away */
action={
<IconButton>
<ThumbUpOutlinedIcon />
</IconButton>
}
title={value}
subheader={value}
/>
<CardContent>
<Typography variant="h6">{value}</Typography>
</CardContent>
</Card>
</CardActionArea>
As you can see above the main div containing the items is at the top with the items horizontally arranged, however there are additional items which are arranged vertically below the div.
My guess is that the top items correctly rendered were rendered in the client side and the bottom items vertically rendered (which also shouldn't be there) were obtained from the server because on inspection of the source, the bottom incorrectly rendered items were not within the __next element.
Why is the presence of the action property in the CardHeader causing this? Or is it possible that my setup with Next and material-ui is incorrect? Thanks.