How to make @emotion/style styles change when a class is changed on a div

Question

SandBox: https://codesandbox.io/s/infallible-nash-x91zz?file=/src/App.js

In the sandbox I have an emotion style defined. It has two classes it in — open and closed.

I am using a state to toggle the classes and the classes are toggling correctly according to the inspector.

Problem: styles not updating on state change.

Expected behavior: background color on div will change when class changes between open and closed

Actual Behavior: The classes are being updated but the stiles are not.

Code:

import React, { useState } from "react";
import "./styles.css";
import styled from "@emotion/styled";

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 (
    <MenuContainer className={openState ? "closed" : "open"}>
      <button value="click" onClick={() => setOpenState(!openState)}>
        Click Me
      </button>
    </MenuContainer>
  );
}

Answer 1

You should do this:

const MenuContainer = styled.div`
  width: 600px;
  height: 600px;
  &.open {
    background-color: blue;
  }
  &.closed {
    background-color: red;
  }
`;