如何在hover Material UI Avatar组件时居中显示用户名

要实现鼠标 hover Avatar 时中间显示姓名的效果，仅需通过 CSS hover 伪类配合绝对定位的覆盖层实现，对现有代码改动最小：

步骤1：新增对应样式 #

以 MUI v4 的 makeStyles 为例，样式定义如下：

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

const useStyles = makeStyles({
  // Avatar 外层容器设为相对定位，宽高和 Avatar 尺寸保持一致
  avatarContainer: {
    position: 'relative',
    display: 'block',
    margin: 'auto',
    cursor: 'pointer',
    // 可根据你的 Avatar 实际尺寸动态传值
    width: props => props.avatarSize,
    height: props => props.avatarSize,
  },
  // 姓名覆盖层默认隐藏
  nameOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    borderRadius: '50%',
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    color: '#fff',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    opacity: 0,
    transition: 'opacity 0.2s ease',
    padding: '4px',
    fontSize: '12px',
    textAlign: 'center',
    wordBreak: 'break-all',
  },
  // hover 时显示覆盖层
  hoverTrigger: {
    '&:hover $nameOverlay': {
      opacity: 1,
    }
  },
  // 保留你原有 Avatar 相关样式即可
  avatar: {
    width: '100%',
    height: '100%',
  }
});

步骤2：调整原有组件结构 #

在原有结构基础上添加姓名覆盖层即可：

// 传入你的 Avatar 实际尺寸，假设姓名存储在 userName 变量中
const classes = useStyles({ avatarSize: 60 });

return (
  <div {...otherProps} className={clsx(classes.avatarContainer, classes.hoverTrigger)}>
    <StyledBadge
      overlap="circular"
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'right',
      }}
      variant={showBadge ? "dot" : "standard"}
    >
      <Avatar alt="avatar" src={src || defaultImg} className={clsx(classes.avatar, classes[size])} />
    </StyledBadge>
    {/* 新增姓名覆盖层 */}
    <div className={classes.nameOverlay}>
      {userName}
    </div>
  </div>
)

注意事项 #

• 如果你使用的是 MUI v5 版本，仅需把样式定义替换为 styled 对应的写法即可，逻辑完全一致
• 可根据页面风格自行调整覆盖层的背景透明度、文字大小、颜色等属性
• 姓名过长时可添加 text-overflow: ellipsis 和 overflow: hidden 实现超出显示省略号的效果
• 不需要过渡动画可直接删除 transition 属性

内容的提问来源于stack exchange，提问作者Abdul Wahab