我可以从 react-bootstrap 模块编辑导航栏吗？怎么做？答案

【问题标题】：Can I edit the Navbar from react-bootstrap module ? How to do it?我可以从 react-bootstrap 模块编辑导航栏吗？怎么做？
【发布时间】：2021-11-17 17:53:37
【问题描述】：

大家好，我目前正在尝试使用 react-bootstrap 制作网络应用程序，并且我想使用 CSS 更改 react-bootstrap 模块中的一些导航栏元素。我想更改 nav.link 标签的颜色、字体大小等，我该怎么做？

这是我的 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

【问题讨论】：

是的，还有 className 属性，您也可以根据需要添加类和样式。

标签： css reactjs react-bootstrap

【解决方案1】：

你可以用 css 做到这一点。为您的元素添加类

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

然后在你的 Header.css 文件中

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

【讨论】：