在 Material UI Chip 中對齊頭像中心

Question

我希望這個圖標顯示在Material UI 芯片的中間，漂亮且居中。 現在它旁邊有一個奇怪的空格：

<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 的 Chip 來做到這一點。

我試過這個，但沒有運氣：

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 上的道具注入自定義樣式的方法。 似乎沒有一個財產讓我首先這樣做。 我認為有一個 classes 道具，但我不明白在這種情況下如何設置它。

Answer 1

使用display: 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" 
/>

Answer 2

@Techuila（謝謝！）在一個方向上幫助了我。 這是對我有用的：

<Chip
  ...
  style={{
    width: '40px',
    height: '30px',
    paddingLeft: '15px',
    margin: '5px'
   }}
/>

這是一種內聯樣式，但在這一點上誰在乎，它的工作原理。

Answer 3

我也遇到了同樣的問題，我的解決方法是在我自己的 css 文件中添加了一個樣式來選擇 MuiChip 圖標。

應用程序.css

.MuiChip-avatar {
  width: 24px;
  height: 24px;
  margin-left: 5px;
  margin-right: -6px;
}

我也認為我錯過了一些東西，但現在我仍然使用這個解決方案。