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 { ... }

Правильный псевдоселектор синтаксис, подобный Hover , выглядит так:

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

Вот пример codesandbox .