reactjs - 默认的“inset”属性填充。ListItemText 组件
问题描述
我正在使用 material-ui 在 React 应用程序中设置嵌套列表的样式。默认的“插入”属性填充很大(56px),所以我试图覆盖该默认值。但我不能。有什么建议么?谢谢 !!
<Fragment>
<ListItem button onClick={this.handleClick}>
<ListItemText
primary="Zones"
primaryTypographyProps={{ variant: 'subtitle2' }}
/>
{this.state.open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem button
component={Link}
to={`${this.props.match.url}/zone/all-zones`}
onClick={THIS.handleMenuOpen}
>
<ListItemText
inset
primary="Show all"
primaryTypographyProps={{ variant: 'subtitle2' }}
/>
</ListItem>
</List>
</Collapse>
</Fragment>
解决方案
inset prop on的目的ListItemText
是将没有图标的项目的文本与有图标的项目的文本对齐(参见Inset List 演示)。它不适用于缩进嵌套列表项。
如果您查看嵌套列表演示,您会发现缩进是通过paddingLeft
应用于嵌套列表项来完成的。在演示中,它设置为 32px ( theme.spacing(4)
),但您可以将其设置为您想要的任何值。
这是嵌套列表演示的代码:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import ListSubheader from "@material-ui/core/ListSubheader";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Collapse from "@material-ui/core/Collapse";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import DraftsIcon from "@material-ui/icons/Drafts";
import SendIcon from "@material-ui/icons/Send";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import StarBorder from "@material-ui/icons/StarBorder";
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper
},
nested: {
paddingLeft: theme.spacing(4)
}
}));
export default function NestedList() {
const classes = useStyles();
const [open, setOpen] = React.useState(true);
const handleClick = () => {
setOpen(!open);
};
return (
<List
component="nav"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
Nested List Items
</ListSubheader>
}
className={classes.root}
>
<ListItem button>
<ListItemIcon>
<SendIcon />
</ListItemIcon>
<ListItemText primary="Sent mail" />
</ListItem>
<ListItem button>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItem>
<ListItem button onClick={handleClick}>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem button className={classes.nested}>
<ListItemIcon>
<StarBorder />
</ListItemIcon>
<ListItemText primary="Starred" />
</ListItem>
</List>
</Collapse>
</List>
);
}
推荐阅读
- mysql - 创建 MySQL 触发器以插入第二个表
- ios - 在 [BluetoothDevice classicDevice] 无法识别的选择器上寻找崩溃源
- android - 无法阻止android中的所有http连接
- google-apps-script - 安装私人谷歌表格插件的问题
- android - packageAndLaunchActivityFromManifest 失败的 appium 错误
- openstack - qemu-guest-agent.service 未在 OpenStack 中启动
- mysql - 使用 HTML 文本更新列(TEXT)(包含 ' 和 ")
- typescript - 在 Typescript 中从 PARTIAL 字符串中查找枚举值
- php - PDO输出分组和计数
- javascript - 检查是否选中了多个复选框