React Bootstrap的NavDropdown下拉箭头无法通过CSS删除如何解决

你编写的CSS不生效是因为选择器匹配错误：React Bootstrap的下拉箭头并不是挂载在外层.dropdown容器的伪元素上，而是挂载在下拉触发按钮对应的.dropdown-toggle类的::after伪元素上。你可以按以下优先级选择方案解决：

• 方法1：使用内置属性（最优方案，无需额外写CSS）
  React Bootstrap的NavDropdown组件本身提供了noCaret属性，设置为true后就不会渲染下拉箭头元素，修改后的组件代码如下：

<NavDropdown 
  className={classes.user} 
  title="Componentes" 
  id="collasible-nav-dropdown"
  noCaret={true}
>
   <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
   <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
   <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
   <NavDropdown.Divider />
   <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>

• 方法2：修改CSS选择器覆盖样式
  如果需要通过CSS实现，按你的场景调整选择器即可：
  如果是全局样式，直接修改选择器：

.dropdown-toggle::after {
  display: none !important; 
}

如果你的项目用了CSS Modules（从代码里的classes.user判断属于这种场景），需要用:global标记包裹全局类名避免被编译哈希化：

:global(.dropdown-toggle)::after {
  display: none !important; 
}

如果不想影响项目里其他的下拉组件，仅修改当前这个NavDropdown，可以给组件添加toggleClassName属性绑定自定义类：

<NavDropdown 
  className={classes.user} 
  title="Componentes" 
  id="collasible-nav-dropdown"
  toggleClassName={classes.userDropdownToggle}
>

对应CSS Modules代码：

.userDropdownToggle::after {
  display: none !important; 
}

内容的提问来源于stack exchange，提问作者Cláudio Vitor Dantas