Reactjs 材质ui网格中的水平滚动
我试图实现一个水平滚动条,但我无法让它显示出来。我试过设置宽度,但似乎没有任何改变 以下是样式:Reactjs 材质ui网格中的水平滚动,reactjs,scroll,material-ui,grid,overflow,Reactjs,Scroll,Material Ui,Grid,Overflow,我试图实现一个水平滚动条,但我无法让它显示出来。我试过设置宽度,但似乎没有任何改变 以下是样式: const useStyles = makeStyles({ flag: { height: "1.3rem", width: "1.3rem", marginRight: "0.5rem", }, name: { color: "black", fontWeight:
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>
最近的事件
共45个
{userList.map((用户)=>{
返回(
{user.first\u name}{user.last\u name}
{user.report}
)
})}
我尝试在“incidentDIV”中实现滚动你能提供一个代码沙盒链接,让我们可以玩一下吗?