Material ui add default padding on List and ListItem how to remove it ? Any help or direction to resources would be appreciated.
答案 0 :(得分:2)
对于其他任何人,从列表中删除默认填充的简单方法是使用“列表组件”上的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
答案 1 :(得分: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:, :, :]
答案 2 :(得分: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。