React Bootstrap导航栏主页选项卡始终突出显示

import { Navbar, Nav, NavItem, Tab, Tabs } from 'react-bootstrap';

<Navbar>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#">Logo</a>
    </Navbar.Brand>
  </Navbar.Header>
  <Nav>
    <NavItem eventKey={1} href="#">Home</NavItem>
    <NavItem eventKey={2} href="#">About</NavItem>
    <NavItem eventKey={3} href="#">Services</NavItem>
  </Nav>
</Navbar>

<Tabs defaultActiveKey={1} id="homepage-tabs">
  <Tab eventKey={1} title="Tab 1">Content 1</Tab>
  <Tab eventKey={2} title="Tab 2">Content 2</Tab>
  <Tab eventKey={3} title="Tab 3">Content 3</Tab>
</Tabs>

.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
  background-color: #f8f8f8;
  color: #333;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: #f8f8f8;
  color: #333;
}