样式未正确应用于 Navbar React 组件

Question

我正在学习 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 未应用于最终文档中生成的nav HTML 标记。任何帮助将不胜感激。

我也尝试在同一个Header.tsx 组件中使用<style jsx>{``}</style>（具有相同的样式），但它也没有任何作用。

Answer 1

CSS 类名没有出现。您可以尝试如下提供：

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

如果在开发者控制台中看到，React 会使用更新后的名称更新提供的用户样式表类名称。

不确定这是否能回答您的疑问，但您可以尝试这样的方法来通过类名选择该元素：

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