删除 React Bootstrap 中的下拉箭头

Question

我正在尝试使用以下 css 删除下拉箭头，但它没有产生任何效果。

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

这是代码

<NavDropdown className={classes.user} title="Componentes" id="collasible-nav-dropdown">
   <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>

Answer 1

这是 Bootstrap 下拉箭头中的 CSS：

因此，为了覆盖它，您需要使用相应的 CSS 选择器：

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

请注意，也许不需要包含

!important

。

Answer 2

不确定这是否已解决，我在选择下拉菜单时遇到了类似的问题，结果发现插入符号/箭头是背景图像，您可以将其设置为 CSS 中的背景图像：无来删除它。