reactjs - React bootstrap自定义导航链接活动样式不起作用

问题描述

实际上，我想将选项卡菜单的活动样式设置为悬停样式。即使我尝试使用 activeClassName="selected" 也不起作用。任何人都可以帮助解决我正在尝试的问题吗？

我正在使用的 CSS

.my-navbar{
  color: #037979;
  font-size: 16px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1.6rem;
  text-decoration: none;
  margin: 10px  10px 10px  10px;

}
.my-navbar:visited {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16px;
}
.my-navbar:hover {
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #c10944;
  font-size: 16px;
  background-color: #61dafb;
}
.active {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #c10944;
  font-size: 16px;
  background-color: #61dafb;
}

react-bootstrap, react-router-dom 这些是使用的导入

 <Router>
                {/*header Menu Bar*/}
                <div className="mycontainer">
                    <Navbar bg="transparent" expand="lg">
                        <Navbar.Brand>
                            <div>
                                <img src={logo} alt="logo" width="200" />
                                {/*   <img src={process.env.PUBLIC_URL + "./images/logo.png"} alt="mypic" width="200" /> */}
                            </div>
                        </Navbar.Brand>

                        <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
                        <Navbar.Collapse id="navbar-toggle" style={{marginTop: 30}}>
                            <Nav className="ml-auto" bsStyle="tabs" >
                                <Link activeClassName="selected" className="my-navbar" to="/">Home</Link>
                                <Link activeClassName="selected" className="my-navbar" to="/about">About</Link>
                                <Link className="my-navbar" to="/services">Services</Link>
                                <Link className="my-navbar" to="/contact">Contact</Link>
                                <Link className="my-navbar" to="/galleries">Galleries</Link>

                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
                {/*Slider Bar*/}
                <Slidingmain />
                <div style={{ paddingTop: 50 }}>
                    <Route defaultActiveKey="/home"  path="/" exact render={() => <HomePage title={this.state.home.title} subTitle={this.state.home.subTitle} text={this.state.home.text} />}  className="container-full"/>
                    <Route path="/about" render={() => <AboutPage title={this.state.about.title} subTitle={this.state.about.subTitle} text={this.state.about.text} />} />
                    <Route path="/services" render={() => <ServicesPage title={this.state.services.title} />} />
                    <Route path="/contact" render={() => <ContactPage title={this.state.contact.title} />} />
                    <Route path="/galleries" render={() => <GalleriesPage title={this.state.galleries.title} />} />
                    <Footer />
                </div>

            </Router >

标签： reactjsbootstrap-4react-bootstrapreact-css-modules

reactjs - React bootstrap自定义导航链接活动样式不起作用

问题描述

解决方案

推荐阅读