title: Using a conditional in Material UI's className
body: <p>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.</p>
  
  <p>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?</p>
  
  <p><b>JSS</b></p>
  
  <pre><code>const styles = makeStyles(theme =&gt; ({
    content: {
      flexGrow: 1,
      padding: theme.spacing(3),
      height: '100vh',
      textAlign: 'center',
      backgroundImage: `url(${Background})`,
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center center",
      backgroundSize: "cover",
      backgroundAttachment: "fixed",
    },
  </code></pre>
  
  <p><code>className={content}</code> is the class I need to change<br />
  <code>renderHeader()</code> renders the page based on the link selected</p>
  
  <pre><code>  return &lt;main className={content}&gt;
      &lt;div className={main}&gt;
        &lt;div className={toolbar} /&gt;
          &lt;Grid container&gt;
            &lt;Grid item xs={12}&gt;
              {renderHeader()}
            &lt;/Grid&gt;
          &lt;/Grid&gt;
      &lt;/div&gt;
      {renderContent()}
    &lt;/main&gt;
  </code></pre>