时间戳

首页 > 解决方案 > 如何切换一个类并更改 Nextjs 中的 CSS？

reactjs - 如何切换一个类并更改 Nextjs 中的 CSS？

问题描述

我正在开发一个 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;
    }
}

当我检查代码时，我可以看到当我单击菜单按钮时它添加了类，但看不到预期的变化。有人有解决方案吗？

标签： reactjssassnext.jscss-modules

解决方案

在这种情况下，您需要使用作用域 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>
    );
}

推荐阅读