无法在NavDropDown上正确应用css

Question

我正在尝试使用react-bootstrap在我的标题中添加一个下拉列表

代码如下所示

const profileImage = <div>
                <img className="header-avatar-pic" 
                    src={ProfilePicAvater} 
                    alt="user pic"
                />
            </div>
        const menuProfile = 
            <NavDropdown title={profileImage} id="basic-nav-dropdown" bsPrefix="drop-down-menu">
                <p>Sebastien Cayet</p>
                <NavDropdown.Divider className="header-divider"/>
                <NavDropdown.Item  bsPrefix="nav-item" href="/profile">{TextContents.MenuProfile}</NavDropdown.Item>
                <NavDropdown.Item  bsPrefix="nav-item" href="/messages">{TextContents.MenuMessages}</NavDropdown.Item>
                <NavDropdown.Item  href="/settings">{TextContents.MenuSettings}</NavDropdown.Item>
                <NavDropdown.Item  href="/logout">{TextContents.MenuLogout}</NavDropdown.Item>                
            </NavDropdown>;

关联的Css

.header-divider {
    background-color: #ff7255; 

}

.drop-down-menu {
    background-color: red;
    border-radius: 50px;
    box-shadow: "0px 8px 18px 0 rgba(0,0,0,0.14)";
}


.header-drop-down-name {
    font-size: 20px;
    font-family: Source Sans Pro;
    color: #333333;
    font-weight: bold;
}

.nav-item{
    font-size: 20px;
    font-family: Source Sans Pro;
    color: #616161;
    font-weight: normal;
}

.nav-item:hover{
    color: #ff7255;
}

真的很奇怪.我不能改变分隔符的颜色和大小，下拉列表中的所有项目都在同一条线上，而不是一个在另一个的下方，当我应用css时，它很快就会出现。还没有什么花哨的，但是，这是恼人的，因为我不能添加圆角和阴影的方框周围的下拉…感觉所有的css都无法正常工作。在我代码的所有其他部分中，它都是有效的。只有在使用Nav时才会出现

它应该看起来像这样：

​

​

但是相反，它看起来像这样：

​

​

箭头未正确放置，菜单未在正确的一侧打开，分隔符未使用正确的颜色。

我还在index.js中添加了引导程序

import 'bootstrap/dist/css/bootstrap.css';

这是一个沙盒链接：SandBoxCode

绝对需要你的帮助

感谢所有人

Answer 1

执行以下所需的更改：

const menuProfile = (
  <NavDropdown
    title={profileImage}
    id="basic-nav-dropdown"
    bsPrefix="drop-down-menu"
  >
    <p>Sebastien Cayet</p>
    <NavDropdown.Divider className="header-divider" />
    // Replace bsPrefix property with className property. 
    // change the className from `nav-item` to `anyClassName`. Here it is `nav-items`
    <NavDropdown.Item className="nav-items" href="/profile">
      {TextContents.MenuProfile}
    </NavDropdown.Item>
    // Replace bsPrefix property with className property. 
    // change the className from `nav-item` to `anyClassName`. Here it is `nav-items`
    <NavDropdown.Item className="nav-items" href="/messages">
      {TextContents.MenuMessages}
    </NavDropdown.Item>
    <NavDropdown.Item href="/settings">
      {TextContents.MenuSettings}
    </NavDropdown.Item>
    <NavDropdown.Item href="/logout">
      {TextContents.MenuLogout}
    </NavDropdown.Item>
  </NavDropdown>
);