How to add custom css of react-bootsrap component in next js - css

Question

i installed the react-bootstrap module using the pm command then imported it in my _app.js file now when i tried to change the bootstrap code i wasnt able to do so
my navbar component provided by bootstrap is this
import Image from 'next/image'
import {
Nav,
Navbar,
NavDropdown,
Form,
Button,
FormControl,
Container,
} from "react-bootstrap";
import headerStyles from '../styles/Header.module.css'
//${headerStyles.navLinks}
export default function NavBar() {
return (
<>
<Navbar bg="dark" expand="lg" variant="dark">
<Container fluid>
<Navbar.Brand href="#">
<Image src={'/logo.png'} height = "30px" width="190px"/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className={"me-auto my-2 my-lg-0 " + headerStyles.navLinks}
style={{ maxHeight: "100px" }}
navbarScroll
>
<Nav.Link className={headerStyles.navLinks_l} href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<Nav.Link href="#" disabled>
Link
</Nav.Link>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className={"me-2"}
aria-label="Search"
/>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
}
here I want to try to customize the CSS of bootstrap which I tried doing with CSS module but I failed. Then I used a global stylesheet to do so but failed
can someone please help me with this?
global css:
.navbar-collapse{
background-color: aqua;
color: black;
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(0, 0, 0);
background-color: blue;
}
.navbar-expand-lg .navbar-nav{
justify-content: space-around;
margin: 0px;
}
.me-auto{
margin: 0 !important;
}

Answer 1

Import global.css after importing bootstrap in _app.js
import "bootstrap.min.js"
import "global.css"
using !important is not a good choice. explanation here