Javascript 在材质UI芯片中对齐化身中心 我希望这个图标出现在中间，美观和居中。现在它旁边有一个奇怪的空格：

const classes=useStyles（）；

---

但我也没有看到通过芯片上的道具注入定制风格的方法。一开始似乎没有什么财产让我这么做。我认为有一个类属性，但我不知道在这种情况下如何设置它。

我也有同样的问题，我的解决方法是在我自己的css文件中添加一个选择MuiChip图标的样式

App.css

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

---

我还认为我遗漏了一些东西，但现在我仍然使用这个解决方案。

使用

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" 
/>

export const useStyles=makeStyles（（主题：主题）=>
创建样式({
芯片：{
显示：“flex”，
对齐项目：“居中”，
为内容辩护：“中心”，
}
}),
);
const classes=useStyles（）；

@Techuila（谢谢！）帮了我一点忙。以下是对我有效的方法：

---

这是一种内联样式，但在这一点上谁在乎呢，它起作用了。

好吧，但你是如何从芯片引用它的，你是如何将它连接到芯片上的道具来引用该类的？我通过添加

className

prop尝试了这一点，但它没有起作用。它实际上把一切都搞砸了，并且使轮廓与图标重叠，所以当你覆盖Mui样式时，就像你失去了主题的其余部分一样，它也变得一团糟up@PositiveGuy如果你把你的

放在阿凡达道具上，那么它应该有一个带有.MuiChip avatar类的div容器。因此，您所要做的就是通过添加上面提到的样式来覆盖css文件中的类样式，无需通过className将其连接到芯片上，因为类名已经存在，我们只需编辑类的样式。在那里，你可以更自由地调整头像的样式，这只是一个解决办法。如果你只想更改选定芯片的样式，那么只需向芯片添加一个新类，并在css上定义样式。这样，您就不必担心其他主题样式会被覆盖。不，我已经试过了，它不起作用。您也没有演示如何通过芯片上的道具将其连接起来。它自己添加display:flex；。如果没有这个，对齐项目：居中和对齐内容：居中将不起作用。我不知道你刚才说了什么。我刚才说的你什么都没读，是吗？嗯，通常我是个完美主义者。如果你在代码库上和我一起进行TDD，我会对干净的代码非常严格：P。我只是对样式没有太多的质疑，一次性的破解是可以的，只要它没有做太多次，你以后再重新尝试改进它。

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

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" 
/>