问题描述
我正在处理一个 Next.js 项目,该项目的菜单打开时使用 <p>
切换菜单类。我设法做到了这一点,但是当我在 CSS 中添加该类时,它并没有考虑到这两个类。
这是我的代码:
组件
import { useState } from "react";
import styles from "../styles/modules/header.module.scss";
export default function Component() {
const [isModal,setIsModal] = useState(false);
return (
<div>
<p onClick={() => setIsModal(!isModal)}>Menu</p>
<div className={`${isModal && "nav-open"} ${styles.ModalContainer}`}>
Content
</div>
</div>
);
}
SCSS
.ModalContainer {
position: absolute;
left: -100vw;
&.nav-open {
left: 0;
}
}
当我检查代码时,我可以看到它在我单击菜单按钮时添加了类,但看不到预期的更改。有人有解决方案吗?
解决方法
您需要使用作用域 Sass 模块文件中的类,在本例中为 styles["nav-open"]
。简单地设置 "nav-open"
将引用一个可能不存在的全局类。
export default function Component() {
const [isModal,setIsModal] = useState(false);
const contentClassname = isModal
? `${styles["nav-open"]} ${styles.ModalContainer}`
: styles.ModalContainer;
return (
<div>
<p onClick={() => setIsModal(!isModal)}>Menu</p>
<div className={contentClassname}>Content</div>
</div>
);
}