对齐 Material UI 按钮内的图标

Question

如何插入一个图标居中的材质ui按钮？

代码片段：

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

预期行为：

当前行为：

Answer 1

这个边距来自 material-ui 本身的startIcon 类。要删除这个，将一个类传入classes 属性中的startIcon。

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

并在 useStyles 中添加类以去除边距。

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

这是工作演示：