调整 Material-UI's 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

This is only applicable to Mui 1.x.x. For later versions, please see responses to this answer below.

ListItem 呈现一个名为 innerDiv 的 div，具有 72px left/right 填充，以呈现具有足够 space 的 left/right 图标和标签。你应该在样式中尝试这个 -

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

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

Answer 2

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

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

Answer 3

这是我的 2¢:

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

调整边距（n.b.，它是一个负数）和上边距你可以将图标（在左边）与你的文字对齐

Answer 4

您可以在 ListItemIcon 中添加样式。

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

Answer 5

接受的解决方案对我不起作用。这是我在探索 DOM.

之后最终做的事情

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

然后将此 class 应用于 ListItemIcon 为：

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

希望它能帮助人们节省时间。

Answer 6

如果你想在全球范围内使用 createMuiTheme

中的覆盖

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

注：

如果您使用的是 MUI 版本 5，则找到 createTheme 而不是 createMuiTheme

Answer 7

如果您想访问主题对象，您也可以使用 sx prop 而不是 style，例如：

<ListItemIcon sx={{minWidth: (theme) => theme.spacing(4)}}>

Answer 8

@Adam Mańkowski 的回答仅供参考。

在 MUI v5.5 中，您可以像这样配置您的主题。

createTheme({
  components: {
    MuiListItemIcon: {
      styleOverrides: {
        root: {
          minWidth: 0
        }
      }
    }
  }
});

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

Adjusting the gap between svg icon and text on Material-UI's List component

material-ui