Good evening, I am looking for a better way to display what you see in the picture. With the CardHeader this is all not centered and I can't use any useState methods.

how it should look

<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
    <CardHeader avatar={<Avatar sx={{ bgcolor: red[500] }} aria-label="logo">N</Avatar>} action={<IconButton aria-label="enable"><FavoriteBorderIcon /></IconButton>} title="Netflix" subheader="netflix.com" />
</Card>

The way it looks here is how I want it to look in the end, but I can't useState methods here. Also the content (e.g. the icon) is not centered vertically.

CodePudding user response：

I dont know why there is a problem with useState hook. Feel free to add it to the and depending on the state switch between normal and red icon.

https://codesandbox.io/s/distracted-oskar-1h7xmj?file=/src/App.js