我正在学习Next.js-当前版本为10.0.3
。我正在使用react-bootstrap
version1.4.0
和classnames
version 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
组件中使用(具有相同的样式),但是它也不执行任何操作。
CSS类名称未显示。您可以尝试如下所示:
className={classnames(styles['border-bottom'], styles['box-shadow'])}>
如果在开发者控制台中看到,React将使用其更新的名称来更新提供的用户样式表类名称。
不确定是否能回答您的疑问,但是您可以尝试通过类名选择类似元素的方法:
[class^="Header_border-bottom"] or [class*="Header_border-bottom"]
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句