Style not being applied correctly to Navbar React component

Question

I'm learning Next.js — currently on version 10.0.3. I'm using react-bootstrap version 1.4.0 and classnames version 2.2.6.

I'm using one component (Navbar) that I'm trying to apply certain styles to, but so far it isn't working. This is what I have so far:

// ~/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);
}

The issue is that border-bottom and box-shadow are not being applied to the resulting nav HTML tag in the final document. Any help will be appreciated.

I've also tried to use <style jsx>{``}</style> (with the same styles) within the same Header.tsx component, but it doesn't do anything either.

Answer 1

CSS class names are not picking up. you may try giving like below:

className={classnames(styles['border-bottom'], styles['box-shadow'])}>

React updates the provided user stylesheet class names with their updated names if seen in the developer console.

Not sure if that answers your doubt but you can try something like this for selecting that element through class name:

[class^="Header_border-bottom"] or [class*="Header_border-bottom"]