嘗試在NextJS專案中覆寫react-bootstrapcss-有解無憂

我正在處理 Next.js 專案并嘗試使用 Bootstrap 作為 CSS 框架。我已經安裝react-bootstrap到專案中，然后開始構建導航欄。我正在嘗試將“.active”類添加到導航欄鏈接之一，以顯示它是當前活動的，但我無法在我自己的 CSS 中覆寫 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; }

I'm importing the Bootstrap components I need from react-bootstrap and building my nav bar. That works fine but as you can see, I'm trying to add a class called '.active' from my CSS Module Header.module.css to the "Active Page" Nav.Link. When I try and do this, the CSS is applied but if I look in DevTools it is being overriden by Bootstrap's .nav-link color: rgba(0,0,0,.55) property.

No matter what order the import statements are, it always seems to be the case that the Bootstrap CSS properties end up overriding anything I've written into Header.module.css. Am I importing react-bootstrap incorrectly? Is there something that has to be done differently this is a Next.js project, not a standard React project?

Any help would be greatly appreciated,

Thank you

P.S. Here is how it looks in DevTools in case it helps:

嘗試在 NextJS 專案中覆寫 react-bootstrap css

uj5u.com熱心網友回復：

原因是 bootstrap 提供了更詳細的選擇器。所以你也可以創建一個更詳細的選擇器，為一些上層元素提供 classNames。你!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;
}

uj5u.com熱心網友回復：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/326595.html

標籤：css reactjs next.js 反应引导 bootstrap-5

上一篇：如何在不弄亂邊框的情況下在表格行上添加洗掉線

下一篇：FutureProvidervsStreamProvidervsChangeNotifierProvider