删除 React Bootstrap 中的下拉箭头答案

【问题标题】：Remove dropdown arrow in React Bootstrap删除 React Bootstrap 中的下拉箭头
【发布时间】：2021-12-06 21:39:36
【问题描述】：

我正在尝试使用以下 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>

【问题讨论】：

也许，试试这个选择器.dropdown-toggle:after 删除箭头。
Junaid 似乎是正确的，更多信息在这里：github.com/react-bootstrap/react-bootstrap/issues/341

标签： css reactjs bootstrap-4 react-bootstrap

【解决方案1】：

这是 Bootstrap 下拉箭头中的 CSS：

所以为了覆盖它，你需要使用相应的 CSS 选择器：

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

请注意，可能不需要包含!important。

【讨论】：