React-Bootstrap，为 NavItems 添加悬停效果答案

【问题标题】：React-Bootstrap, Adding Hover Effects to NavItemsReact-Bootstrap，为 NavItems 添加悬停效果
【发布时间】：2020-04-20 01:32:52
【问题描述】：

我是 React 新手，所以我正在尝试为组件添加一些自定义样式。

我正在尝试在我的导航链接上获得悬停效果，但它没有按照我想要的方式工作，默认悬停效果工作正常

这是我的组件。

import React from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import styled from 'styled-components';

const styles= styled.div`

    .Navbar-brand, .Navbar-Nav .Nav-Item .Nav-Link  {
        color: #fff;

        "&:hover":{
            color:#fb7840;
        }
    }

    .Navbar-Toggle-icon  {
        background-image: url("data:image/svg+xml;");
        color:#fff;
    }
`;
export const NavigationBar = () => (
    <styles>
        <Navbar variant="dark" expand="lg" sticky="top" style={{backgroundColor:'#000', color:'#fff', borderBottom:'1px solid #fb7840'}}>
            <Navbar.Brand href="/" style={{fontSize:'24px', fontWeight:'10em'}}>SARWAR ENTERPRISES</Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" className="toggler"/>
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="ml-auto">
                    <Nav.Item><Nav.Link href="/">HOME</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/About">ABOUT</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/Projects">PROJECTS</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/Partners">PARTNERS</Nav.Link></Nav.Item>
                    <Nav.Item><Nav.Link href="/Contact">CONTACT</Nav.Link></Nav.Item>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
        </styles>
)

【问题讨论】：

标签： reactjs react-bootstrap styled-components react-web

【解决方案1】：

您有一些混合的大写 / 小写代码：

// This is actually a React component so it should start with uppercase
const Styles = styled.div`...`;

...

// And so, should be rendered like any valid component:
export const NavigationBar = () => (
   <Styles>
     <Navbar>
     ...
     </Navbar>
   </Styles>
)

引导类也总是以小写字母开头：

.Navbar-brand,
.Navbar-Nav .Nav-Item .Nav-Link { ... }

应该是：

.navbar-brand,
.navbar-nav .nav-item .nav-link { ... }

Hover 之类的正确pseudo selectors 语法如下：

  .navbar-nav .nav-item .nav-link {
    color: #fff;
    &:hover {
      color: #fb7840;
    }
  }

这是一个 codesandbox 示例。

【讨论】：