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

x80486

我正在学习Next.js-当前版本为10.0.3我正在使用react-bootstrapversion1.4.0classnamesversion 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组件中使用(具有相同的样式),但是它也不执行任何操作。

srujana bhamidipalli

CSS类名称未显示。您可以尝试如下所示:

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

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

不确定是否能回答您的疑问,但是您可以尝试通过类名选择类似元素的方法:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

CSS 未正确应用于 Angular 中的自定义组件

样式未正确应用于 <ul> 标签

在React中将条件样式应用于组件-内联CSS

如何将样式化组件样式应用于自定义React组件?

样式未应用于 MaterialUI React 中的 SVGIcon

CSS 样式未应用于 React 文件

来自样式标签的CSS样式未正确应用于页面

Bootstrap 样式未正确应用于应用程序中的所有元素

无法将样式应用于React.js中的样式组件元素

反应样式化的组件不将样式应用于组件

不能使用样式化组件将样式应用于React Native中的自定义组件吗?

样式(tailwind/SCSS 样式表)未应用于 React 中动态插入的 HTML

角度样式未应用于组件(尽管使用了宿主选择器)

填充未正确应用于标题

如何将CSS样式应用于自定义React组件

如何将后备样式属性应用于React JS组件?

如何测试样式是否动态应用于React组件

如何将本地样式应用于导入的 React 组件

将样式应用于扩展的React Native组件的推荐方法是什么?

为什么我的CSS不将样式应用于React组件?

WPF 样式:对样式如何应用于组件的全面描述

无法将焦点样式应用于样式组件

NextJS React 应用程序样式组件未正确呈现:警告:Prop `className` 不匹配

扩展React样式的组件

安装React样式的组件

子样式应用于Angular 2中的父组件?

将样式应用于Tab组件中的ButtonBase

在VueJS组件中将样式应用于Flatpickr

Angular Materials不会将样式应用于组件