用 Click 附加 class 会弄乱整个 css

Question

我真的不知道为什么在转换 X 位置的同时附加一个额外的 class 以使滑动效果在 React 中无法像预期的那样工作，而在使用 vanilla 时却如此 javascript . 这是代码示例

.inputModal {
  position: absolute;
  width: 500px;
  height: 150px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  background-color: rgba(25, 26, 26, 0.74);
  left: -8px;
  top: 30%;
  box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.5);
  transform: translateX(-93%);
  transition: all 0.3s ease-in-out;
} 

.InputModal.show {
transform: translateX(0px);
}

以及应该附加 class 在按钮单击时显示的简单组件

function InputModal() {
  const [toggleBtn, setToggleBtn] = useState(true);
  return (
    <div className={toggleBtn ? "inputModal" : "InputModal show"}>
      <Input />
      <div
        className="toggleBtn"
        onClick={() => {
          setToggleBtn(!toggleBtn);
        }}
      >
        <i className="fas fa-align-justify"></i>
      </div>
    </div>
  );
}

单击切换按钮 (div) 后，显示 class 会附加到 div，但 div 会丢失所有先前设置的样式搞砸了

Answer 1

您应该追加而不是更改类，就像：

function InputModal() {
  const [toggleBtn, setToggleBtn] = useState(true);
  return (
    <div className={`inputModal ${toggleBtn ? "" : "InputModal show"}`}>
      <Input />
      <div
        className="toggleBtn"
        onClick={() => {
          setToggleBtn(!toggleBtn);
        }}
      >
        <i className="fas fa-align-justify"></i>
      </div>
    </div>
  );
}

用 Click 附加 class 会弄乱整个 css

Appending a class with Click messes up the whole css

css

reactjs

react-css-modules