React material-ui AvatarGroup 额外子项的圆形

Question

如何控制附加到 React Material-UI AvatarGroup 的额外项目的形状（当头像数量超过 max 时）以便它匹配头像的 rounded 变体。

      <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 文档没有提到如何设置：https://material-ui.com/api/avatar-group/

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

Answer 1

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

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>
  );
}

请在 codesandbox

上找到一个工作示例

React material-ui AvatarGroup 额外子项的圆形

React material-ui AvatarGroup rounded shape for extra child

material-ui

react-material