样式未正确应用于 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 标签。任何帮助将不胜感激。

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 名称未被提取。你可以尝试像下面这样给予：

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

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

不确定这是否能解答您的疑问，但您可以尝试通过 class 名称选择该元素：

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

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

Style not being applied correctly to Navbar React component

css

reactjs

next.js

styled-jsx