这是我第一次使用Next.JS的CSS模块，它们非常有用。
但是，当我尝试将样式应用于children元素时，我遇到了一个奇怪的行为。
例如，如果我有以下HTML

<Offcanvas show={menu} onHide={closeMenu} className={styles.mobile_menu}>
    <Offcanvas.Header closeButton className={styles.mobile_menu_header}>
        <Offcanvas.Title className={styles.mobile_menu_title}>
            <h1>Menu</h1>
        </Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <ul className="list-unstyled">
            { links.map((link, key) => (
                <li key={"nav-link-" + key} className="mb-3">
                    <Link href={link.href} className={[styles.link, router.pathname == link.href ? "active" : ""].join(" ")}>{ link.label }</Link>
                </li>
            )) }
        </ul>
    </Offcanvas.Body>
</Offcanvas>

这个SCSS

.mobile_menu {
    background-color: rgb(57, 70, 78) !important;
    color: #fff !important;
}

.mobile_menu_header {
    border-bottom: solid 1px rgb(148, 162, 170);

    button.btn-close {
        filter: brightness(0) invert(1) !important;
        opacity: 1 !important;
        width: 1.6rem !important;
        height: 1.6rem !important;
        background-size: 100% !important;
    }
}

.mobile_menu_title {
    h1 {
        font-size: 3.2rem;
    }
}

.link {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.7rem;
    transition: color 0.3s ease-in-out;

    &.active {
        border-bottom: solid 1rem rgb(148, 162, 170) !important;
    }

    &:hover {
        color: rgb(148, 162, 170);
    }
}

应用于button.btn-close（通过将closeButton标志添加到Offcanvas.Header自动生成）的属性未应用，并且与active类的链接没有预期的底部边框。
所以这让我觉得Next.JS的CSS模块中的SASS没有使用嵌套的/child/选择器，但是，由于某种原因，.mobile_menu_title中的h1是样式化的，并且，当我试图从选择器中删除.btn-close（只留下button）时，它被应用了!
那么，这是一个bug还是我不知道的东西？使用SASS的嵌套样式只适用于"纯"元素，而不适用于具有类/ID的选择器。
有人能帮我一下吗？
谢谢!

• • 注意：**我使用的是react Bootstrap 包。