材质UI表溢出

时间:2021-04-22 20:15:16

标签: javascript reactjs material-ui

我在我的项目中使用 Material UI 表时遇到问题,Material UI 表没有滚动响应(整个表来自父组件,如图像)。

enter image description here

我尝试了一些方法来解决问题,但没有成功,例如设置宽度 '100%' 和 overflowX: 'auto' 或 overflowX: 'scroll' 但没有任何效果响应是在没有表格的情况下完美运行

enter image description here

这是我的代码:

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>
  )

0 个答案:

没有答案
相关问题