Проблема при реализации прокрутки в React с пользовательским интерфейсом материала

Question

Доброе утро. Я хочу включить полосу прокрутки в свое приложение, и у меня есть некоторые проблемы с этим, есть это представление, которое по умолчанию имеет заголовок и 3 кнопки, а также кнопку отмены, которая возвращает меня на предыдущую страницу. Как только я нажимаю на одну из них, появляется компонент карты с различными входами и зоной сброса для добавления изображений. Если я сохраню эту информацию, представление вернется к трем кнопкам, как и раньше, но теперь в нем есть таблица, которая показывает информацию, которую я включил. в меню, упомянутом ранее.

Из-за всего этого количества информации мой вид исчезает, и я не могу прокручивать.

Я пробовал использовать PerfectScrollbar, но он просто не слушает его Насколько я понимаю, вы помещаете этот компонент между div, в данном случае один я называю «root», а другой - «содержимым», и он должен помочь, но я, должно быть, что-то упускаю. Я также пробовал делать это с «автоматическим переполнением», но, что более важно, контент просто продолжает существовать, и его невозможно просмотреть.

Я не знаю, связано ли это с другими частями view, находящийся в своих собственных компонентах, тот факт, что большинство этих частей являются условным рендером или просто CSS материей.

...

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;

Заранее спасибо.