无法在 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 的 none 工作正常。在我的代码的所有其他部分，它都有效。仅在使用 Nav

时

它应该是这样的：

但它看起来像这样：

箭头位置不正确，菜单打开方向不正确，分隔线使用的颜色不正确..

我还在 index.js

中添加了 bootstrap

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

这是一个沙盒 link: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>
);

无法在 NavDropDown 上正确应用 css

Impossible to apply css properly on a NavDropDown

javascript

css

reactjs

react-bootstrap

react-bootstrap-nav