SASS 在 Next.JS CSS 模块中无法正常工作

Question

For the first time, I'm using Next.JS's CSS modules, and they are very useful.

But I'm experiencing a strange behaviour when trying to apply styles to children elements.

For example, if I have the following 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>

And this 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);
    }
}

The properties applyed to the button.btn-close (that's auto generated by adding the closeButton flag to Offcanvas.Header ) aren't applyed, also links with active class hasn't a bottom border as expected.

So this makes me think the SASS in Next.JS's CSS modules aren't using nested/child/ selectors. But, for some reason, the h1 inside .mobile_menu_title is styled, and, when I try to remove the .btn-close from selector (leaving only the button ), it's applied!

So, is this a bug or something I don't know about? Nested styles using SASS only work with "pure" elements, not to selectors that have classes/IDs.

Can someone help me with this?

Thanks!

Note: I'm using react-bootstrap package.

Answer 1

Well, what you can do is the following

In your JavaScript file

...

<Offcanvas.Header closeButton className={styles.mobile_menu_header}>

  ...

</Offcanvas.Header>

...

In your style file

.mobile_menu_header {
  border-bottom: solid 1px rgb(148, 162, 170);
  :global {
    button.btn-close {
      filter: brightness(0) invert(1) !important;
      opacity: 1 !important;
      width: 1.6rem !important;
      height: 1.6rem !important;
      background-size: 100% !important;
    }
  }
}

Why this?

By adding the :global rule, you are, basically, telling your React application: "In the element with computed class name mobile_menu_header (the actual class name will be like index_mobile_menu_header_xxxxxxxx ), find the element with class name btn-close and apply the style specified".

Wrapping everything in a mobile_menu_header , as you did, can be helpful to avoid overwriting btn-close in the whole application and have them just overwritten in this component.

This can be a strategy to adapt when the only way to overwrite a CSS library is to overwrite the styles themself (so if you can not customize the library in other ways like styled-components or theme settings) but you also need to face with CSS modules (the one that are causing the name to be likeinstead of just the class name).