I'm currently working on a project using Next.js and attempting to integrate Bootstrap as the CSS framework. After installing react-bootstrap into the project, I proceeded to create the navigation bar. My goal is to assign an '.active' class to one of the navigation links to visually indicate the active page. However, I am encountering difficulty when trying to override Bootstrap's styles with my own custom CSS.
In the _app.tsx file, I import the Bootstrap CSS like this:
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
The navigation component resides in a file named 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;
Here is the simple CSS code I'm using:
.active { color: red; }
Although I am importing the necessary Bootstrap components from react-bootstrap and constructing the navigation bar successfully, I encounter an issue while attempting to apply a class called '.active' from my CSS Module Header.module.css to the "Active Page" Nav.Link. Upon inspection using DevTools, I notice that Bootstrap's .nav-link property (color: rgba(0,0,0,.55)) overrides the custom style defined in my CSS module.
Regardless of the order of import statements, it seems that Bootstrap's CSS properties consistently take precedence over any modifications made in Header.module.css. Is there a correct way to import react-bootstrap? Are there specific considerations to be addressed since this is a Next.js project, not a standard React project?
Any assistance provided would be greatly appreciated,
Thank you
P.S. Here is a screenshot from DevTools for reference: