Material UI 按钮内的对齐图标

Question

如何插入一个图标居中 material ui 按钮？

一段代码：

 <Button variant="outlined" startIcon={<Add color='primary'/>} style={{ maxWidth: "36px" }} />

预期行为：

当前行为：

Answer 1

此边距来自 startIcon class 来自 material-ui 本身。要删除此传递 class 到 classes prop.

中的 startIcon

<Button
    style={{ maxWidth: "36px", minWidth: "36px" }}
    classes={{ startIcon: classes.startICon }}
    variant="outlined"
    startIcon={<Add />}
></Button>

并在 useStyles 中添加 class 以删除边距。

const useStyles = makeStyles((theme) => ({
  startICon: {
    margin: 0
  }
}));

这是工作演示：