material-ui - 如何从 Material ui 列表项中删除默认填充？

Question

Material ui 在 List 和 ListItem 上添加默认填充如何删除它？
对资源的任何帮助或指导将不胜感激。

Answer 1

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

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 .