title: Next.js - Cant apply dynamic class names when using CSS Modules
body: <p>hoping someone here can help me solve this.</p>
  <p>Am trying to build a website through NextJs. One of my pages has some paragraphs and buttons which are styled differently based on states and events. I can get the styling to work as intended when using pure React, and also when using a Global Stylesheet with NextJs; but when I use CSS Modules I cant get it to function as intended.</p>
  <p>(Note: I can also get it to work by using a simple ternary like
  <code>&lt;h1 className={submitted ? styles.showresult : styles.hideresult}&gt;Correct? {correct}&lt;/h1&gt;</code>;
  but I have some other scenarios where I need to rely on an multiple ifs and create multiple classes, each with their own styling, so I cant make a simple ternary my final solution.</p>
  <p>E.g. this is the file pagex.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  const Pagex = () =&gt; {
  
  const [submitted, setSubmitted] = React.useState(false); // whether the submit button was pressed
  
  function calculateScore() {
    let correct = 0
    let incorrect = 0
      //......some scoring logic.....    
    setSubmitted(true)
    }
  
    // function to create a display class based on whether the submit button has been pressed
   function displayResult(){
     if (submitted === true) {
        return &quot;showtheresult&quot;
      } else {
           return &quot;hidetheresult&quot;
      }
    }
  
  return (
    &lt;section className=&quot;results&quot;&gt;
        &lt;h1 className={displayResult()}&gt;Correct? {correct}&lt;/h1&gt;
        &lt;h1 className={displayResult()}&gt;Incorrect? {incorrect}&lt;/h1&gt;
    &lt;button className={displayResult()} onClick={handleMovClick}&gt;An instruction&lt;/button&gt;
      &lt;/section&gt;
      &lt;/div&gt;
    );
  };
  export default Pagex;
  </code></pre>
  <p>the globals.css file contains</p>
  <pre><code>h1.hidetheresult, h3.hidetheresult {
    visibility: hidden;
  }
  
  h1.showtheresult, h3.showtheresult {
    visibility: visible;
  }
  
  button.hidetheresult {
      border-color: pink;
    }
  
  button.showtheresult {
      border-color: aqua;
    }
  </code></pre>
  <p>Changes when using CSS modules</p>
  <ol>
  <li>Add a CSS file in the correct folder with the correct name
  (../styles/Pagex.module.css) which contains the same styling shown
  above</li>
  <li>Additional import in pagex.js <code>import styles from '../styles/Pagex.module.css'</code></li>
  <li>Change reference in the function
  within pagex.js</li>
  </ol>
  <pre><code>    function displayResult(){
         if (submitted === true) {
            return {styles.showtheresult}
          } else {
               return {styles.hidetheresult}
          }
        }
  </code></pre>
  <p>When i do this the '.' in <code>{styles.showtheresult}</code> and <code>{styles.hidetheresult}</code> gets highlighted as an error by vscode with this detail: <strong>',' expected. ts(1005).</strong>
  Saving the js with a dev server running shows a similar message after trying to compile: <strong>Syntax error: Unexpected token, expected &quot;,&quot;</strong> and the browser shows the same message along with <strong>&quot;Failed to compile&quot;</strong></p>
  <p>Also tried just passing <code>styles.showtheresult</code> / <code>styles.hidetheresult</code> by removing the curly braces from the displayResult() function. That compiles but nothing happens on the compiled webpage, i.e the class doesnt get updated when the button is pressed and so the styling cant be applied.</p>
  <p>Also Tried passing as ${styles.showresult} and ${styles.hideresult} (with `)in the return statement. That also compiles but the page itself gives me an <strong>&quot;Unhandled Runtime Error ReferenceError: styles is not defined&quot;</strong> message and I cant load the page.</p>
  <p>Would highly appreciated if someone could help correct my syntax in the function itself or elsewhere in the code.</p>