调整Material-UI列表组件上svg图标和文本之间的差距

Question

我一直试图弄清楚如何使用css减少差距而没有运气。我创建了样式对象并使用了leftPosition键，但结果不是我预期的那个。我期待文本是唯一会移动的东西。但是，如果您专门查看第一个菜单的屏幕截图，图标也会移动。我想要实现的是缩小svn图标和文本之间的差距。

return x

Answer 1

接受的解决方案对我不起作用。这是我探索DOM之后最终要做的。

const useStyles = makeStyles((theme) => ({
    icon: {
        minWidth: '30px',
    }
}));

，然后将此类用于ListItemIcon：

<ListItemIcon className={classes.icon}> <HelpOutlineIcon/> </ListItemIcon>

希望它可以帮助某人节省时间。

Answer 2

ListItem呈现一个名为innerDiv的div，其左/右填充为72px，以渲染左/右图标并标注足够的空间。你应该在Style -

中试试这个

<ListItem innerDivStyle={{paddingLeft: 60}} primaryText="Logs" leftIcon={<Assignment />} />

用任何你喜欢的东西替换60.

Answer 3

您可以在ListItemIcon中添加样式。

<ListItemIcon style={{minWidth: '40px'}} >

Answer 4

这是我的2¢：

<ListItemText primary={<div style={{ margin: -25, marginTop: -7, color: 'white', fontSize: 11 }}>Your text here</div>} />

调整页边距（n.b.，它是一个负数），您可以将图标（左侧）与文本对齐的顶部页边距

Answer 5

这对我有用。我在全局css文件中进行了设置。

.MuiListItemIcon-root {
  min-width: 40px !important;
}

Answer 6

如果您想全局执行此操作，请使用 createMuiTheme 中的覆盖

const theme = createMuiTheme({
  overrides: {
    MuiListItemIcon: {
      root: {
        minWidth: 40,
      },
    },
  },
})