Блог

Я хочу, чтобы действия (редактирование и удаление) были выровнены по вертикали по центру заголовка. Как показано на скриншоте, кнопки не выровнены с заголовком и аватаром CardHeader. Кажется, что аватар выравнивается по центру по вертикали, когда для отображения содержимого заголовка требуется две или более строк, но действия остаются в верхнем правом углу.

Я был бы очень признателен за любую помощь от сообщества.

Вот мой фрагмент кода

 <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>
    }
/>
 

Добавлено новое:
Возможное решение для переопределения действия MuiCardHeader. Но если есть какое-либо лучшее решение, пожалуйста, предложите мне. Спасибо!

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

На самом деле, вы можете сразу же использовать CardHeader props :-

• classes : чтобы применить изменения к root of CardHeader (мы также можем применить action стиль отсюда)
• titleTypographyProps : для применения любых стилей к заголовку
• subheaderTypographyProps : для применения любых стилей к субтитрам
• используйте makeStyles из @material-ui/core/styles и переопределяйте их, используя classes вместо того, чтобы делать это вручную с помощью withStyles переопределения (это более аккуратно и чисто)
• 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'
  },
}));
 

Вы можете увидеть эту рабочую песочницу, чтобы попробовать живую версию.