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

对于其他任何人，从列表中删除默认填充的简单方法是使用“列表组件”上的disablePadding属性。

Name            Type    Default     Description
disablePadding  bool    false       If true, vertical padding will be removed from the 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

Answer 2

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

#adding 1 to all pixels and setting masked pixels as zero. 
mask_img+=1
crop_img+=1
mask_img[:,:,2][:,int(img.shape[1]/2):int(img.shape[1])] = 0

glcm_crop = greycomatrix(crop_img[:,:,2], 
                levels=257,
                distances=1, 
                angles=0,
                symmetric=True,
                normed=True)

glcm_masked = greycomatrix(mask_img[:,:,2], 
                levels=257,
                distances=1, 
                angles=0,
                symmetric=True,
                normed=True)

#discarding the first row and column that represent zero value pixels
glcm_masked =glcm_masked[1:, 1:, :, :]
glcm_crop = glcm_crop[1:, 1:, :, :]

Answer 3

您可以覆盖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。

How to remove default padding from material ui List Item?

3 个答案: