javascript - 在 Material UI Chip 中对齐头像中心

Question

我希望这个图标显示在 Material UI chip 的中间，漂亮且居中。现在它旁边有一个奇怪的空白:

<Chip
  avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
  size="small"
  variant="outlined" 
/>

export function LinkAvatarImage({ socialTypeId } : { socialTypeId: number }) {
  if (socialTypeId === socialTypes.PERSONAL_WEBSITE) {
    return <WebIcon />;
  }
...

我不知道如何调整 Material UI 的芯片来做到这一点。

我试过了，但没有成功:

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    chip: {
      alignItems: 'center',
      justifyContent: 'center',
    }
  }),
);

const classes = useStyles();

<Chip
  avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
  size="small"
  classes={classes.chip}
  variant="outlined" 
/>

但我也没有看到通过 Chip 上的 Prop 注入(inject)自定义样式的方法。首先似乎没有让我这样做的属性(property)。我认为有一个 classes Prop ，但我不明白在这种情况下如何设置它。

Answer 1

使用显示:flex

export const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    chip: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }
  }),
);

const classes = useStyles();

<Chip
  avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
  size="small"
  classes={classes.chip}
  variant="outlined" 
/>