Стиль неправильно применяется к компоненту Navbar React

Я изучаю Next.js — сейчас на версии 10.0.3. Я использую react-bootstrap версию 1.4.0 и classnames версию 2.2.6.

Я использую один компонент (Navbar), к которому пытаюсь применить определенные стили, но пока это не работает. Это то, что у меня есть до сих пор:

// ~/project-name/components/Header.tsx
import classnames from "classnames";
import Link from "next/link";
import React from "react";
import { Container, Nav, Navbar } from "react-bootstrap";

import styles from "./Header.module.css";

const Header: React.FC = () => {
  return (
    <>
      <Navbar className = {classnames(styles.borderBottom, styles.boxShadow)} bg = "dark" expand = "lg" variant = "dark">
        <Container>
          <Link href = "/" passHref>
            <Navbar.Brand><span className = "font-weight-bold">./shīdo.io</span></Navbar.Brand>
          </Link>
          <Navbar.Toggle aria-controls = "id-navbar-nav" />
          <Navbar.Collapse id = "id-navbar-nav">
            <Nav className = "ml-5 mr-auto">
              <Link href = "/" passHref>
                <Nav.Link active>Home</Nav.Link>
              </Link>
              <Link href = "/features" passHref>
                <Nav.Link>Features</Nav.Link>
              </Link>
            </Nav>
            <Nav>
              <Link href = "/login" passHref>
                <Nav.Link>Login</Nav.Link>
              </Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </>
  );
};

export default Header;

# ~/project-name/components/Header.module.css
@charset "UTF-8";

.border-bottom {
  border-bottom: 5px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .5rem .75rem rgba(0, 0, 0, .05);
}

Проблема в том, что border-bottom и box-shadow не применяются к результирующему HTML-тегу nav в конечном документе. Любая помощь будет оценена.

Я также пытался использовать <style jsx>{``}</style> (с теми же стилями) в одном и том же компоненте Header.tsx, но это тоже ничего не дает.