调整 Material-UI 的 List 组件上 svg 图标和文本之间的间隙

Question

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

import React from 'react';
import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import ActionGrade from 'material-ui/lib/svg-icons/action/grade';
import ActionInfo from 'material-ui/lib/svg-icons/action/info';
import ContentInbox from 'material-ui/lib/svg-icons/content/inbox';
import ContentDrafts from 'material-ui/lib/svg-icons/content/drafts';
import ContentSend from 'material-ui/lib/svg-icons/content/send';
import Divider from 'material-ui/lib/divider';

import Assignment from 'material-ui/lib/svg-icons/action/assignment';
import Settings from 'material-ui/lib/svg-icons/action/settings';
import ManageDB from 'material-ui/lib/svg-icons/content/unarchive';

const style = {
  menu: {
    marginRight: 32,
    marginBottom: 32,
    float: 'left',
    position: 'relative',
    zIndex: 0,
    width: 235,
  },
  rightIcon: {
    textAlign: 'center',
    lineHeight: '24px',
  },
  width: {
    width: 235
  },
  leftPosition: {
    left: 50
  }
};

const LeftNavigation = () => (
  <div>
    <List>
      <ListItem style={style.leftPosition} primaryText="Logs" leftIcon={<Assignment />} />
      <ListItem primaryText="Manage DB" leftIcon={<ManageDB style={style.gap}/>} />
      <ListItem primaryText="Top Issues" leftIcon={<ContentSend style={style.gap}/>} />
      <ListItem primaryText="Settings" leftIcon={<Settings style={style.gap}/>} />
      <ListItem primaryText="Logout" leftIcon={<ContentInbox style={style.gap}/>} />
    </List>
    <Divider />
    <List>
      <ListItem primaryText="All mail" rightIcon={<ActionInfo />} />
      <ListItem primaryText="Trash" rightIcon={<ActionInfo />} />
      <ListItem primaryText="Spam" rightIcon={<ActionInfo />} />
      <ListItem primaryText="Follow up" rightIcon={<ActionInfo />} />
    </List>
  </div>
);

export default LeftNavigation;

Answer 1

您可以在ListItemIcon中添加样式。

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

Answer 2

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

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

然后将此类应用于 ListItemIcon 为：

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

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

Answer 3

这仅适用于 Mui 1.xx 对于更高版本，请参阅下面对此答案的回复。

ListItem 渲染一个名为innerDiv 的div，其左/右填充为72px，以便为左/右图标和标签渲染足够的空间。你应该在风格中尝试这个 -

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

将 60 替换为您喜欢的任何内容。