javascript - 无法在 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>
);