如何为React-bootstrap NavDropdown的.dropdown-menu添加自定义类/样式？有无更直接方法？

除了导入自定义CSS，React-Bootstrap提供了更直接的方式来给内部的.dropdown-menu元素添加自定义类或样式，以下是几种实用方案：

1. 使用menuProps属性（推荐） #

NavDropdown组件自带menuProps属性，可直接将属性传递给内部的.dropdown-menu元素，无需额外全局CSS，精准控制单个组件的菜单样式。

添加自定义类名 #

<NavDropdown 
  title='nav dropdown' 
  id='basic-nav-dropdown' 
  align='end'
  // 给dropdown-menu传递自定义类名
  menuProps={{ className: 'custom-dropdown-menu' }}
>
  <NavDropdown.Item href='#'>1</NavDropdown.Item>
  <NavDropdown.Item href='#'>2</NavDropdown.Item>
  <NavDropdown.Item href='#'>3</NavDropdown.Item>
</NavDropdown>

之后只需针对.custom-dropdown-menu编写样式即可，不会影响其他下拉菜单组件。

添加内联样式 #

如果不想编写CSS文件，可直接通过menuProps传递内联样式：

<NavDropdown 
  title='nav dropdown' 
  id='basic-nav-dropdown' 
  align='end'
  menuProps={{ 
    style: {
      backgroundColor: '#f0f4f8',
      border: 'none',
      borderRadius: '8px',
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
    } 
  }}
>
  <NavDropdown.Item href='#'>1</NavDropdown.Item>
  <NavDropdown.Item href='#'>2</NavDropdown.Item>
  <NavDropdown.Item href='#'>3</NavDropdown.Item>
</NavDropdown>

2. 自定义bsPrefix（适用于组件全局前缀定制） #

通过bsPrefix修改NavDropdown的类前缀，内部的.dropdown-menu会自动变为[自定义前缀]-menu，彻底避免默认样式冲突：

<NavDropdown 
  title='nav dropdown' 
  id='basic-nav-dropdown' 
  align='end'
  bsPrefix='custom-nav-dropdown'
>
  <NavDropdown.Item href='#'>1</NavDropdown.Item>
  <NavDropdown.Item href='#'>2</NavDropdown.Item>
  <NavDropdown.Item href='#'>3</NavDropdown.Item>
</NavDropdown>

此时下拉菜单的类名为.custom-nav-dropdown-menu，可针对性编写样式：

.custom-nav-dropdown-menu {
  /* 你的自定义样式 */
}

这个方法适合需要对整个NavDropdown组件（包括触发按钮和菜单）做统一风格定制的场景。

注意 #

全局修改.dropdown-menu样式容易引发跨组件样式冲突，上述方法均针对单个NavDropdown的菜单做定制，更可控、更灵活。

内容的提问来源于stack exchange，提问作者aboutjquery