Reactjs React引导，为NavItems添加悬停效果

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

从“React”导入React；
从'react bootstrap'导入{Nav，Navbar}；
从“样式化组件”导入样式化；
const styles=styled.div`
.Navbar品牌，.Navbar导航.Nav项目.Nav链接{
颜色：#fff；
“&：悬停”：{
颜色：#fb7840；
}
}
.导航栏切换图标{
背景图像：url（“数据：image/svg+xml；”）；
颜色：#fff；
}
`;
导出常量导航栏=（）=>(
萨瓦尔企业
家
关于
项目
合作伙伴
联系
)

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

//这实际上是一个React组件，因此它应该以大写字母开头
const Styles=styled.div`……`；
...
//因此，应该像任何有效组件一样呈现：
导出常量导航栏=（）=>(
...
)

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

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

应该是：

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

正确的语法（如Hover）如下所示：

.navbar导航.nav项目.nav链接{
颜色：#fff；
&：悬停{
颜色：#fb7840；
}
}

下面是一个示例