reactjs - 材料ui网格内的水平滚动反应
问题描述
我正在尝试实现一个水平滚动条,但我无法让它显示出来。我试过设置宽度,这似乎并没有改变任何东西。
以下是样式:
const useStyles = makeStyles({
flag: {
height: "1.3rem",
width: "1.3rem",
marginRight: "0.5rem",
},
name: {
color: "black",
fontWeight: 550,
fontSize: 14,
},
incidentText: {
color: "grey",
fontSize: 14,
},
incidentDiv: {
// height: "10rem",
// width: "44rem",
overflowX: "scroll",
}
});
这是代码:
<Grid container direction="column">
<Grid item>
<Grid container direction="row" xs={12}>
<Grid container xs={6}>
<Grid item>
<img src={Flag} alt="incident flag" className={classes.flag} />
</Grid>
<Grid item>
<Typography>Recent Incidents</Typography>
</Grid>
</Grid>
<Grid container justify="flex-end" xs={6}>
<Grid item>
<Typography>45 total</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid container direction="row" className={classes.incidentDiv}>
{userList.map((user) => {
return (
<SmallCard>
<Grid container xs={12}>
<Grid item xs={4}>
<Avatar src={user.profile_pic} />
</Grid>
<Grid item container direction="column" xs={8}>
<Grid item>
<Typography className={classes.name}>{user.first_name} {user.last_name}</Typography>
</Grid>
<Grid item>
<Typography className={classes.incidentText}>
{user.report}
</Typography>
</Grid>
</Grid>
</Grid>
</SmallCard>
)
})}
</Grid>
</Grid>
我试图实现滚动的地方是在“incidentDIV”内
解决方案
推荐阅读
- rust - 类型具有静态生命周期意味着什么?
- powershell - 如何在 Windows 终端 powershell 选项卡中运行 powershell 脚本(.ps1)?
- html - DevTools 无法加载 SourceMap:无法加载 http://localhost:3000/javascripts/bootstrap.js.map 的内容:HTTP 错误:状态代码 404,网络:
- android - Android NFC 可以在没有用户输入/操作或没有通知的情况下工作吗?
- networking - 使用 ESXi 将独立的物理系统与构建在系统内部的 VM 联系起来
- javascript - 带有 ReactJs 的 Firebase - 行的顺序有问题
- visual-studio-code - VSCode复制粘贴单词列表,同时保持一般结构
- python - 如何将我的 Flask_socketio 应用正确推送到 Heroku?
- docker - 如何将 apache-superset 与 apache-drill 连接起来?
- c++ - 读取无效数据 c6385