如何在div上更改类时使@memotional/style样式发生更改

Question

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

在沙盒中，我定义了一种情感风格。它分为两类——开放类和封闭类。

我正在使用一个状态来切换类，并且类根据检查器正确切换。

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

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

实际行为：类正在更新，但门梃没有。

代码：

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;
}
`;