React-Bootstrap, Adding Hover Effects to NavItems

Question

I'm new to React so i'm trying to add some custom styling to components.

I'm trying to get hover effect on my nav-links but its not working the way i want the default hover effect is working fine

Here is my component.

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

You have some mixed uppercase / lowercase code:

// 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 classes also always start with lowercase letters:

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

Should be:

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

The correct pseudo selectors syntax like Hover is like so:

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

Here is a codesandbox example.