如何从材料 ui 列表项中删除默认填充？答案

【问题标题】：How to remove default padding from material ui List Item?如何从材料 ui 列表项中删除默认填充？
【发布时间】：2019-04-23 15:09:57
【问题描述】：

Material ui add default padding on List 和 ListItem 如何移除？任何对资源的帮助或指导将不胜感激。

【问题讨论】：

标签： material-ui

【解决方案1】：

您可以覆盖ListItem 组件的root 类并传递您想要的填充。

const styles = theme => ({
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  },

  item: {
    padding: 0
  }
});

function SimpleList(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <List component="nav">
        <ListItem button classes={{ root: classes.item }}>
          <ListItemText primary="Item 01" />
        </ListItem>
        <ListItem button classes={{ root: classes.item }}>
          <ListItemText primary="Item 02" />
        </ListItem>
        <ListItem button classes={{ root: classes.item }}>
          <ListItemText primary="Item 03" />
        </ListItem>
      </List>
    </div>
  );
}

见working sample。

【讨论】：

@PanayiotisGeorgiou 欢迎您！不要犹豫，然后将答案标记为已接受；）

【解决方案2】：

对于其他来到这里的人来说，从列表中删除默认填充的简单方法是使用 List Component 上的 disablePadding 属性。

https://material-ui.com/api/list/


    import React from 'react'
    import List from '@material-ui/core/List'
    import ListItem from '@material-ui/core/ListItem'
    import ListItemText from '@material-ui/core/ListItemText'
    
    function Sidebar() {
      return (
        <List disablePadding>
          <ListItem button>
            <ListItemText>Home</ListItemText>
          </ListItem>
          <ListItem button>
            <ListItemText>Billing</ListItemText>
          </ListItem>
          <ListItem button>
            <ListItemText>Settings</ListItemText>
          </ListItem>
        </List>
      )
    }
    
    export default Sidebar

【讨论】：

【解决方案3】：

如果您只使用ListItem 组件，则可以使用disableGutters（布尔）属性来禁用左右填充，如API 文档所示：https://material-ui.com/api/list-item/

<ListItem disableGutters={true} button={true} key='Home' component={Link} to={"/"} selected={'/' === pathname}>
   <ListItemIcon><Home /></ListItemIcon>
   <ListItemText primary='Home' />
</ListItem>

【讨论】：

非常感谢您的回答！ ?