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

【问题标题】：Adjusting the gap between svg icon and text on Material-UI's List component调整 Material-UI 的 List 组件上的 svg 图标和文本之间的间隙
【发布时间】：2016-02-02 01:42:37
【问题描述】：

我一直在试图弄清楚如何使用 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;

【问题讨论】：

标签： material-ui

【解决方案1】：

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

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

然后将此类应用于 ListItemIcon 为：

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

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

【讨论】：

【解决方案2】：

您可以在 ListItemIcon 中添加样式。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

如果您想全局使用 createMuiTheme 中的覆盖

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

注意：

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

【讨论】：

这个答案对我来说更有用，因为它是全球性的。 TY

【解决方案5】：

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

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

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

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

【讨论】：

这个答案在材料 ui 4.0 以后仍然相关吗？
@MaxCarroll，不，它不适用于@material-ui/core 4.9.5。我不得不使用自定义样式覆盖 .MuiListItemIcon-root 的最小宽度
您也可以使用类属性逐个覆盖应该也能完成这项工作

【解决方案6】：

这是我的 2 美分：

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

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

@Adam Mańkowski 的答案只是信息。

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

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

【讨论】：