我在我的项目中使用 Material UI 表时遇到问题,Material UI 表没有滚动响应(整个表来自父组件,如图像)。
我尝试了一些方法来解决问题,但没有成功,例如设置宽度 '100%' 和 overflowX: 'auto' 或 overflowX: 'scroll' 但没有任何效果响应是在没有表格的情况下完美运行
这是我的代码:
return(
<div className="content-form" style={{width: '100%', backgroundColor: 'red', overflowX: 'scroll'}}>
<TableContainer
>
<Table
>
<TableHead>
<TableRow>
{
headers.map((header)=>{
return(
<TableCell
style={{border: '1.5px solid gray'}}
size="small">
{header}
</TableCell>
)
})
}
</TableRow>
</TableHead>
<TableBody>
{
items?.map((item:any ,index:number)=>{
return (
<TableRow>
{
Object.keys(item).map((key)=>{
if(sentences.includes(key)){
return(
<TableCell
style={{border: '1.5px solid gray'}}>
{
parseValue(item[key])
}
</TableCell>
)
}else{
return null
}
})
}
{ actions == true &&
<TableCell
style={{border: '1.5px solid gray'}}>
<IconButton onClick={()=>{
edit(index, formId)
}}>
<CreateOutlinedIcon
color="primary"
/>
</IconButton>
<IconButton onClick={()=>{
deleteItem(index, formId)
}}>
<DeleteOutlineOutlinedIcon
color="primary"
/>
</IconButton>
</TableCell>
}
</TableRow>
)
})
}
</TableBody>
</Table>
</TableContainer>
</div>
)