Использование условного выражения в ClassName пользовательского интерфейса для материала

Question

У меня есть главная страница и боковая панель навигации для моего приложения. У меня есть высота фонового изображения, установленная на «100vh», что хорошо для моей целевой страницы, но когда я загружаю другую страницу, которая содержит больше контента, и мне нужно прокрутить, чтобы увидеть все это - фоновое изображение обрезается, а остальная часть страницы пусто Если я установлю высоту изображения на «100%», это устранит проблему для этой страницы, но для других страниц, которые имеют меньше содержимого, будет отображаться только фоновое изображение для размера этого div.

В зависимости от ссылки, выбранной на панели навигации, я хочу изменить высоту фонового изображения. Это возможно? или есть более простое решение?

JSS

const styles = makeStyles(theme => ({
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    height: '100vh',
    textAlign: 'center',
    backgroundImage: `url(${Background})`,
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center center",
    backgroundSize: "cover",
    backgroundAttachment: "fixed",
  },

className={content} - это класс, который мне нужно изменить
renderHeader() отображает страницу на основе выбранной ссылки

  return <main className={content}>
    <div className={main}>
      <div className={toolbar} />
        <Grid container>
          <Grid item xs={12}>
            {renderHeader()}
          </Grid>
        </Grid>
    </div>
    {renderContent()}
  </main>