How to remove default padding from material ui List Item?

Question

Material ui add default padding on List and ListItem how to remove it ? Any help or direction to resources would be appreciated.

Answer 1

You can override the root class of the ListItem component and pass the padding you want.

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>
  );
}

See working sample.

Answer 2

If you're just using a ListItem component, you can use the disableGutters (Boolean) property to disable the left and right padding, as seen from the API documentation: 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>