How to center the action with CardHeader title in Material-UI for React?

user_8119208 0
Viewed 1803

I want to achieve the actions (Edit & Delete) to align vertically centered on the CardHeader. As shown in the screenshot, the buttons are not aligned with the title & avatar of CardHeader. The avatar seems to align center vertically when the content of the title requires two or more lines to show, but the actions stay in the top right corner.

I would really appreciate any help from the community.

enter image description here

Here is my code snippet

<CardHeader
    avatar={
        <Avatar className={classes.avatarNumber}>
            <Typography variant={"h5"}>Q</Typography>
        </Avatar>
    }
    title={<Typography variant={"h6"}>Gelloo</Typography>}
    action={
        <Box>
            <IconButton>
                <DeleteIcon/>
            </IconButton>
            <IconButton>
                <EditIcon/>
            </IconButton>
        </Box>
    }
/>

Added new: A possible solution to override the MuiCardHeader-action. But if there is any better solution, please suggest me. Thanks!

overrides: {
    MuiCardHeader: {
        action: {
            marginTop: "auto",
            marginBottom: "auto"
        }
    }
}

enter image description here

material-ui reactjs
1 Answers

Actually, you can straight away use CardHeader props of:-

  • classes: to apply changes to root of CardHeader (we can apply action style too from here)

  • titleTypographyProps: to apply any styles to the title

  • subheaderTypographyProps: to apply any styles to the subTitle

  • use makeStyles from @material-ui/core/styles and override them using classes instead of doing manually using withStyles override (this is more neat and clean)

  • example.js:-

import { makeStyles } from '@material-ui/core/styles'

const Demo = () => {
  const classes = useStyles()

  return (
    <CardHeader
      avatar={
        <Avatar className={classes.avatarNumber}>
          <Typography variant={"h5"}>Q</Typography>
        </Avatar>
      }
      title={<Typography variant={"h6"}>Gelloo</Typography>}
      action={
        <Box>
          <IconButton>
            <DeleteIcon/>
          </IconButton>
          <IconButton>
            <EditIcon/>
          </IconButton>
        </Box>
      }
      classes={{
        root: classes.cardHeaderRoot,
        action: classes.cardHeaderAction
      }}
      titleTypographyProps={{
        classes: {
          root: classes.cardHeaderTitleRoot
        }
      }}
      subheaderTypographyProps={{
        classes: {
          root: classes.cardHeaderSubTitleRoot
        }
      }}
    />
  )
}
export default Demo

const useStyles = makeStyles((theme) => ({
  cardHeaderRoot: {
    backgroundColor: theme.palette.grey[400]
  },
  cardHeaderAction: {
    margin: "auto"
  },
  cardHeaderTitleRoot: {
    color: theme.palette.error.main,
    textAlign: 'center'
  },
  cardHeaderSubTitleRoot: {
    color: theme.palette.error.main,
    textAlign: 'center'
  },
}));

You can see this working sandbox to try the live version.

user_129968550
Related