我可以从react-bootstrap模块编辑导航栏吗?怎么做呢?

Question

嗨，伙计们，所以我目前试图使web应用程序使用react-bootstrap，我想改变一些从react-bootstrap模块使用CSS导航栏元素。我想更改导航的颜色、字体大小等。我该怎么做呢?

这是我的Header.JS代码:

import {Navbar, Nav} from 'react-bootstrap'
import {Link} from 'react-router-dom'
import '../CSS/Header.css'
const Header = () => {
return (
<Navbar className="MainHeader" expand="lg" variant="dark">
<>
<Navbar.Brand className="Headerlogo" as={Link} to={"/"}>
<img src="/Images/logowhite.png" alt="hotel_logo"/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse className="Headerlist justify-content-end fontReg">
<Nav>
<Nav.Link as={Link} to={"/Facilities"}>Facilities</Nav.Link>
<Nav.Link as={Link} to={"/Room"}>Room</Nav.Link>
<Nav.Link as={Link} to={"/Events"}>Events</Nav.Link>
<Nav.Link as={Link} to={"/Contactus"}>Contact Us</Nav.Link>
<Nav.Link as={Link} to={"/Booknow"}>Book Now</Nav.Link>
</Nav>
</Navbar.Collapse>
</>
</Navbar>
)
}
export default Header

Answer 1

你可以用css来做。为元素添加class

<Nav.Link as={Link} to={"/Facilities"} className="custom-link"> ...

然后在Header.css文件

.custom-link {
color: #F5890;
font-size: 20px;
...
}