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

#material-ui

#материал-пользовательский интерфейс

Вопрос:

Пользовательский интерфейс материала добавляет заполнение по умолчанию в список и ListItem как его удалить? Любая помощь или направление к ресурсам будут оценены.

Ответ №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>
  );
}

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

Ответ №2:

Для всех, кто еще приходит сюда, простой способ удалить заполнение по умолчанию из списка — использовать disablePadding prop в компоненте списка.

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 (Boolean), чтобы отключить левое и правое заполнение, как видно из документации 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>