时间戳

首页 > 解决方案 > 样式未正确应用于 Navbar React 组件

css - 样式未正确应用于 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没有应用于nav最终文档中生成的 HTML 标记。任何帮助将不胜感激。

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

标签： cssreactjsnext.jsstyled-jsx

解决方案

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

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

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

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

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

推荐阅读