javascript - 材质 UI 表溢出
问题描述
我在项目中使用 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>
)
解决方案
推荐阅读
- google-bigquery - 行和中位数内的 bigquery 计算 - 这可能吗?
- javascript - 从 Eventbrite API 获取特定事件(通过位置)的问题
- c++ - C 文件与 C++ 文件的 Eclipse CDT 索引器结果不同
- latex - 基于 RMarkdown 中的输出运行块
- javascript - 比较两个 JavaScript 对象并提取匹配属性的键和值
- python - 将函数映射或应用到单个值 - Python 3 中的正确方法
- gradle - 如何发布和使用构建为 fatJar 的 gradle 插件?
- cocoa - 如何插入 NSBezierPath/UIBezierPath 并在位置检索正常向量?
- python - 测试一个整数是否是切片的索引值
- regex - 基于正则表达式批量修改密码查询中的节点