尝试在 NextJS 项目中覆盖react-bootstrap css

问题描述 投票：0回答：3

我正在开发一个 Next.js 项目并尝试使用 Bootstrap 作为 CSS 框架。我已经将 

react-bootstrap
安装到项目中，然后开始构建导航栏。我正在尝试将“.active”类添加到导航栏链接之一，以显示它是当前活动的，但我在自己的 CSS 中覆盖 Bootstrap 的属性时遇到问题。

我将 bootstrap css 导入到 

_app.tsx
文件中，如下所示：

import type { AppProps } from 'next/app'

import 'bootstrap/dist/css/bootstrap.min.css';

import Header from './layouts/Header';

function MyApp({ Component, pageProps }: AppProps) {

  return (
    <>
      <Header />
      <Component {...pageProps} />
    </>
  );

}
export default MyApp

我的导航位于名为 Header.js 的组件内：

import Head from 'next/head';
import Image from 'next/image'
import Link from 'next/link';

import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
import styles from '../../styles/Header.module.css';

import headerLogo from '../../public/img/header-logo.png';

const Header = () => {
    return (
        <div>
            <Head>
                <title>Test Project</title>
                <link rel='icon' href='/favicon.ico' />
            </Head>
            <Navbar collapseOnSelect expand="lg" bg="light" style={{ maxWidth: '1440px' }} >
                <Navbar.Brand href='/'>
                    <Image src={headerLogo} alt="logo" />
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-nabar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="me-auto">
                        <Link href="/"><Nav.Link>Home</Nav.Link></Link>
                        <Link href="/page1"><Nav.Link className={styles.active}>Active Page</Nav.Link></Link>
                        <Link href="/page2"><Nav.Link>Page 2</Nav.Link></Link>
                        <Link href="/page3"><Nav.Link>Page 3</Nav.Link></Link>
                        <Link href="/about"><Nav.Link>About Us</Nav.Link></Link>
                        <Link href="/contact"><Nav.Link>Contact Us</Nav.Link></Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </div >
    )
}

export default Header;

这是我的简单 CSS：

.active { color: red;     }

我正在从 

react-bootstrap
导入我需要的 Bootstrap 组件并构建我的导航栏。这工作正常，但正如您所看到的，我正在尝试将一个名为“.active”的类从我的 CSS 模块
Header.module.css
添加到“活动页面”
Nav.Link
。当我尝试执行此操作时，会应用 CSS，但如果我在 DevTools 中查看，它会被 Bootstrap 的 
.nav-link
color: rgba(0,0,0,.55)
属性覆盖。

无论 import 语句的顺序如何，Bootstrap CSS 属性似乎总是会覆盖我写入的任何内容 

Header.module.css
。我是否错误地导入了
react-bootstrap
？这是一个 Next.js 项目，而不是一个标准的 React 项目，是否需要做一些不同的事情？

任何帮助将不胜感激，

谢谢你

附注这是它在 DevTools 中的样子，以防有帮助：

css reactjs next.js react-bootstrap bootstrap-5
3个回答
0
投票

尝试在 so 之后添加 !important -> color: #0d6efd !important;

0
投票

原因是bootstrap提供了更详细的选择器。因此，您也可以创建一个更详细的选择器，为一些上部元素提供类名。当然，您可以使用 

!import
，如上所述。

更新： 在您的屏幕截图中，您会看到有一个 

.navbar-light .navbar-nav .nav-link
规则，因此您必须创建一个类似的规则并添加您自己的选择器。在这里，您需要切换到全局范围，如下所示：https://github.com/css-modules/css-modules#exceptions

所以

Header.module.css
中的规则可能看起来像：

:global(.navbar-light) :global(.navbar-nav) :global(.nav-link).active {
  color: red;
}
0
投票

执行以下操作，使用 scss 和 NextJS 应用程序路由器修复了该问题：

  1. 在/app中创建app.scss文件
  2. @import '~bootstrap/scss/bootstrap';
    /app/app.scss
  3. import './app.scss'
    /app/layout.js

我正在尝试寻找发生这种情况的原因，但还没有成功。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.