Remove dropdown arrow in React Bootstrap

Question

i´m trying to remove the dropdown arrow with this following css, but it´s not making any effect.

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

here is the code

<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

Here is the CSS from the Bootstrap dropdown arrow:

So in order to overwrite it you need to use the corresponding CSS selector:

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

Note that maybe there is no need to include the !important.