css - 对齐 Material UI 按钮内的图标

Question

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

一段代码：

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

预期行为：

当前行为：

标签： cssreactjsmaterial-uigoogle-material-icons

Answer 1

这个边距startIcon来自 material-ui 本身的类。要删除这个，将一个类传递给startIconinclasses道具。

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

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

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

这是工作演示：