Как удалить отступы по умолчанию из материала элемента списка?

Question

Материал 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>
  );
}

См. рабочий образец .