Using a conditional in Material UI's className

I have a main page and a side nav bar for my application. I have the background image height set to '100vh' which is fine for my landing page but when I load another page that contains more content, and I have to scroll to see it all - the background image cuts off and the rest of the page is blank. If I set the image height to '100%' this fixes the problem for that page but for the other pages that have less content, it only displays the background image for the size of that div.

Depending on the link selected on the nav bar, I would like to change the height of the background image. Is that possible? or is there an easier solution?

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} is the class I need to change
renderHeader() renders the page based on the link selected

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