如何解决某些组件显示无法在屏幕上显示并且检查元素没有帮助
我正在尝试设计一个看起来像这样的UI
到目前为止,我拥有的是这个
我遇到的问题是获取信息图标以显示其应在的位置,并获取直接文本并在左上角创建图标。我也无法在用户界面中像Instagrams一样显示主要和常规内容,并且抽屉上的滚动条一直向上移动,而不是停止在应用程序栏所在的位置。
这是我的代码
import React from "react";
import { makeStyles,withStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import List from "@material-ui/core/List";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Avatar from "@material-ui/core/Avatar";
import PersonIcon from "@material-ui/icons/Person";
import Badge from "@material-ui/core/Badge";
import InfoIcon from "@material-ui/icons/Info";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import { connect } from "react-redux";
function mapStateToProps(state) {
return {};
}
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",},appBar: {
width: `calc(100% - ${drawerWidth}px)`,backgroundColor: "#fff",drawer: {
width: drawerWidth,flexShrink: 0,drawerPaper: {
width: drawerWidth,// necessary for content to be below app bar
toolbar: theme.mixins.toolbar,content: {
flexGrow: 1,backgroundColor: theme.palette.background.default,padding: theme.spacing(3),}));
const SmallAvatar = withStyles((theme) => ({
root: {
width: 11,height: 11,color: "green",backgroundColor: "green",}))(Avatar);
const Messaging = () => {
const classes = useStyles();
const dummy = "Active now";
return (
<div className={classes.root}>
<AppBar position='fixed' className={classes.appBar}>
<Toolbar style={{ width: "100%" }}>
<Avatar>
<PersonIcon />
</Avatar>
<Typography variant='h6'>adib.akm</Typography>
<InfoIcon />
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant='permanent'
classes={{
paper: classes.drawerPaper,}}
anchor='left'>
<div className={classes.toolbar} />
<Divider />
<List>
<ListItem>
<ListItemAvatar>
<Badge
overlap='circle'
anchorOrigin={{
vertical: "bottom",horizontal: "right",}}
badgeContent={<SmallAvatar />}>
<Avatar>
<PersonIcon />
</Avatar>
</Badge>
</ListItemAvatar>
<ListItemText primary='Photos' secondary={dummy} />
</ListItem>
<ListItem>
<ListItemAvatar>
<Badge
overlap='circle'
anchorOrigin={{
vertical: "bottom",}}
badgeContent={<SmallAvatar />}>
<Avatar>
<PersonIcon />
</Avatar>
</Badge>
</ListItemAvatar>
<ListItemText primary='Work' secondary={dummy} />
</ListItem>
<ListItem>
<ListItemAvatar>
<Badge
overlap='circle'
anchorOrigin={{
vertical: "bottom",}}
badgeContent={<SmallAvatar />}>
<Avatar>
<PersonIcon />
</Avatar>
</Badge>
</ListItemAvatar>
<ListItemText primary='Vacation' secondary={dummy} />
</ListItem>
</List>
</Drawer>
</div>
);
};
export default connect(mapStateToProps)(Messaging);
这是密码框https://codesandbox.io/s/mutable-monad-dsvf8?file=/src/index.js
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。