时间戳

首页 > 解决方案 > React material-ui AvatarGroup 圆形，用于额外的孩子

material-ui - React material-ui AvatarGroup 圆形，用于额外的孩子

问题描述

如何控制附加到 React Material-UI AvatarGroup 的额外项目的形状（当 Avatar 的数量超过 时max），使其与roundedAvatar 的变体匹配。

在此处输入图像描述

      <AvatarGroup max={4}>
            <Avatar
              variant="rounded"
              alt="Remy Sharp"
              src="/static/images/avatar/1.jpg"
            />
            <Avatar
              variant="rounded"
              alt="Travis Howard"
              src="/static/images/avatar/2.jpg"
            />
            <Avatar
              variant="rounded"
              alt="Cindy Baker"
              src="/static/images/avatar/3.jpg"
            />
            <Avatar
              variant="rounded"
              alt="Agnes Walker"
              src="/static/images/avatar/4.jpg"
            />
            <Avatar
              variant="rounded"
              alt="Trevor Henderson"
              src="/static/images/avatar/5.jpg"
            />
          </AvatarGroup>

API doc没有提到如何设置这个：https ://material-ui.com/api/avatar-group/

虽然“下一个”版本可以：https ://next.material-ui.com/es/api/avatar-group/

标签： material-uireact-material

解决方案

您可以使用 mui 全局类选择器覆盖形状的样式：

import React from "react";
import Avatar from "@material-ui/core/Avatar";
import AvatarGroup from "@material-ui/lab/AvatarGroup";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      "& .MuiAvatar-root": { borderRadius: 0 }
    }
  })
);

export default function GroupAvatars() {
  const classes = useStyles();
  return (
    <AvatarGroup max={4} className={classes.root}>
      <Avatar
        alt="Remy Sharp"
        variant="rounded"
        src="/static/images/avatar/1.jpg"
      />
      <Avatar
        alt="Travis Howard"
        variant="rounded"
        src="/static/images/avatar/2.jpg"
      />
      <Avatar
        alt="Cindy Baker"
        variant="rounded"
        src="/static/images/avatar/3.jpg"
      />
      <Avatar
        alt="Agnes Walker"
        variant="rounded"
        src="/static/images/avatar/4.jpg"
      />
      <Avatar
        alt="Trevor Henderson"
        variant="rounded"
        src="/static/images/avatar/5.jpg"
      />
    </AvatarGroup>
  );
}

请在代码沙箱上找到一个工作示例

推荐阅读