title: How to make @emotion/style styles change when a class is changed on a div
body: <p>SandBox: <a href="https://codesandbox.io/s/infallible-nash-x91zz?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/infallible-nash-x91zz?file=/src/App.js</a></p>
  <p>In the sandbox I have an emotion style defined. It has two classes it in — open and closed.</p>
  <p>I am using a state to toggle the classes and the classes are toggling correctly according to the inspector.</p>
  <p>Problem: styles not updating on state change.</p>
  <p>Expected behavior: background color on div will change when class changes between open and closed</p>
  <p>Actual Behavior: The classes are being updated but the stiles are not.</p>
  <p>Code:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import styled from &quot;@emotion/styled&quot;;
  
  const MenuContainer = styled.div`
    .open {
      background-color: blue;
      width: 600px;
      height: 600px;
    }
    .closed {
      background-color: red;
      width: 600px;
      height: 600px;
    }
  `;
  export default function App() {
    const [openState, setOpenState] = useState(false);
  
    return (
      &lt;MenuContainer className={openState ? &quot;closed&quot; : &quot;open&quot;}&gt;
        &lt;button value=&quot;click&quot; onClick={() =&gt; setOpenState(!openState)}&gt;
          Click Me
        &lt;/button&gt;
      &lt;/MenuContainer&gt;
    );
  }
  </code></pre>