Javascript 在“与物料反应”UI中实现滚动时出现问题

早上好。 我想在我的应用程序中包含一个滚动条，但我在处理它时遇到了一些问题。默认情况下，这个视图有一个标题和3个按钮，以及一个“取消”按钮，可以将我带回上一页。 当我点击其中一个按钮时，一个卡片组件会显示不同的输入和一个dropzone来添加图像，如果我保存了这些信息，视图会像以前一样返回到3个按钮，但现在它有一个表，显示了我在前面提到的菜单中包含的信息

所有这些信息量使我的视图消失，我无法滚动

我试过使用PerfectScrollbar，但它就是不听，据我所知，你把这个组件放在div之间，在这种情况下，一个我称之为“root”，另一个我称之为“content”，它应该可以做到这一点，但我肯定遗漏了什么。 我也尝试过用“溢出自动”来做，但更多的是，内容一直在运行，而且永远都看不到

我不知道这是否是视图的其他部分在它们自己的组件中的问题，事实上，大多数这些部分是有条件渲染的，或者只是CSS问题

返回(
检验报告
{showTask&&
task.date
}
|
{showTask&&
task.technology.name
}  
{showTask&&
{showListFailures&&
开放断层
}
{shownofult&&
没有缺点
在对{task.inspection.date}进行检查期间，{task.asset.name}上未检测到任何错误
}
{showNotMeasured&&
未测量
在检查{task.inspection.date}期间，没有对{task.asset.name}进行测量
}
}
{！showAddResult&&
}
{showAddResult&&
}
取消
{showListFailures&&
拯救
}
{openResolveDialog&&
}
);
}
导出默认检查报告；

先谢谢你

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3),
  },
  title: {
    marginTop: theme.spacing(3),
    color: 'black',
    fontWeight: 'bold',
  },
  content: {
    height: '1000px'
  },
  description: {
    marginTop: theme.spacing(3),
    color: 'black',
  },
  add: {
    position: 'absolute',
    bottom: 10,
    right: 10,
    backgroundColor: 'orange',
    color: 'white',
  },
  applyMargins: {
    marginTop: 20,
    marginRight: 20,
  },
  marginTop: {
    marginTop: 10,
  },
  buttonSave: {
    color: 'white',
    backgroundColor: 'darkorange',
    marginRight: 20,
    textTransform: 'none',
    fontWeight: 'bold',
    '&:hover': {
      backgroundColor: 'orange',
    },
  },
  buttonCancel: {
    color: 'white',
    backgroundColor: 'darkorange',
    marginRight: 20,
    textTransform: 'none',
    fontWeight: 'bold',
    '&:hover': {
      backgroundColor: 'orange',
    },
  },

}));

return (
    <div className={classes.root}>
      <div className={classes.content}>
        <Grid container spacing={12}>
          <Typography
            className={classes.title}
            variant="h2"
          >
            Inspection Report
          </Typography>
        </Grid>
        <Grid item xs={12}>
          <Typography
            className={classes.description}
            variant="body1"
          >
            { showTask &&
              task.date
            }
            |
            { showTask &&
              task.technology.name
            }  
          </Typography>
        </Grid>
      { showTask &&
        <div className={classes.applyMargins}>
          <Grid container spacing={12}>
            { showListFailures &&
              <div>
                <Typography
                  className={classes.title}
                  variant="h5"
                >
                  Open faults
                </Typography>

                <FailuresTable 
                resolve={handleResolve}
                remove={handleRemove}
                task={newAnalysis}
                />
              </div>
            }
            { showNoFault &&
              <Card>
                <CardContent className={classes.content}>
                    <Typography variant="h4" className={classes.title}>
                      No faults
                    </Typography>
                    <Typography vart Measurediant="body1" >
                      During the inspection on {task.inspection.date} no fault was detected on {task.asset.name}
                    </Typography>

                </CardContent>
              </Card>

            }
            { showNotMeasured &&
              <Card>
                <CardContent className={classes.content}>
                    <Typography variant="h4" className={classes.title}>
                      Not Measured
                    </Typography>
                    <Typography variant="body1" >
                      During the inspection on {task.inspection.date} no measurements were taken on {task.asset.name}
                    </Typography>

                </CardContent>
              </Card>
            }

          </Grid>
        </div>
      }
      { !showAddResult &&
        <div className={classes.applyMargins}>
          <Grid container spacing={12}>
            <AddResult 
              noFault={noFault}
              newFault={newFault}
              notMeasured={notMeasured}
              disableNoButtons={showListFailures}
            />
          </Grid>
        </div>
      }
      { showAddResult &&
        <div className={classes.applyMargins}>
          <Grid container spacing={12}>
            <ReviewFault 
              analysis={newAnalysis}
              statuss={cdbStatus}
              failures={cdbFailures}
              cancelFault={cancelFault}
              saveFault={saveFault}
            />
          </Grid>
        </div>
      }
        <div className={classes.marginTop}>
          <Button size="big" className={classes.buttonCancel} onClick={handleCancelInspection}>
            Cancel
          </Button> 
          { showListFailures &&
            <Button size="big" className={classes.buttonSave} onClick={handleSaveInspection}>
              Save
            </Button> 
          }
        </div>
      { openResolveDialog &&
        <ResolveDialog 
          asset={task.asset}
          analysis={resolveAnalysis}
          open={openResolveDialog} 
          close={closeResolveDialog}
          resolveAnalysis={handleResolveAnalysis}
        />
      }
    </div>
    </div>
  );
}

export default InspectionReport;