如何在 div 上更改 class 时更改 @emotion/style 样式

Question

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

在沙盒中，我定义了一种情感风格。它有两个 classes — 打开和关闭。

我正在使用一个状态来切换 classes 并且 classes 根据检查员的说法正确切换。

问题：样式未在状态更改时更新。

预期行为：div 上的背景颜色将在 class 在打开和关闭之间变化时发生变化

实际行为：classes 正在更新，但窗框没有。

代码：

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

你应该这样做：

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

如何在 div 上更改 class 时更改 @emotion/style 样式

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

emotion

reactjs