如何在中心对齐startIcon材质ui图标？

Question

我正在尝试保持图标按钮中心对齐，但有些东西不能正常工作。 向 sx 道具添加 left: "0.5rem" 进一步推动按钮图标。 我试图不使用 makeStyles 来覆盖 position。 任何提示/方向都会有所帮助:)

沙盒链接

Answer 1

您可以尝试使用样式：

<Stack direction="row" style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
  <Tooltip title="Delete">
    <Button sx={{ minWidth: 0 }} startIcon={<DeleteIcon />} />
  </Tooltip>
  <Divider orientation="vertical" flexItem />
  <Tooltip title="Send">
    <Button sx={{ minWidth: 0 }} startIcon={<SendIcon />} />
  </Tooltip>
  <Tooltip title="Headset">
    <Button sx={{ minWidth: 0 }} startIcon={<HeadsetMicOutlined />} />
  </Tooltip>
  <Divider orientation="vertical" flexItem />
</Stack>

Answer 2

如果你想在你的主题中设置它，你可以这样做，这样你就不必在每个 Button 组件中都这样做。

export const theme = createTheme({
  ...
  components: {
    MuiButton: {
      styleOverrides: {
        startIcon: {
          margin: '0'
        },
      },
    }
  },
});