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

Question

大家好，所以我目前正在尝试使用 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

标签： cssreactjsreact-bootstrap

Answer 1

你可以用css来做。将类添加到您的元素

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

然后在你的 Header.css 文件中

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