React-Bootstrap, 为 NavItems 添加悬停效果

Question

我是 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>
)

Answer 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>
)

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

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

应该是：

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

正确的 pseudo selectors 语法如 Hover 是这样的：

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

这是一个codesandbox例子。

React-Bootstrap, 为 NavItems 添加悬停效果

React-Bootstrap, Adding Hover Effects to NavItems

reactjs

react-bootstrap

react-web

styled-components