CODEWITHSUNDEEP
javascripthtmlcssreactjs
SAYAN
SAYAN

Reputation: 35

Unable to change dropdown element color in react-js

I am new in react-js.I was making a dropdown in my nav bar using the react-bootstrap but am unable to change the color of the text and the dropdown button using css.It is always having the default color of blue.I changed other properties of it and they all were changing very fine using css but only the color value is not having any effect.It would be helpful if someone can help me.

<NavDropdown title="Random" style = {{color : 'white' }}  >
                    <NavDropdown.Item href="#action/3.1">Deals</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Amazon Skills</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Amazon Devices</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.4">Apps and Games</NavDropdown.Item>
                </NavDropdown>

Upvotes: 0

Views: 288

Answers (1)

Mauricio Blum
Mauricio Blum

Reputation: 36

This is because the NavDropdown component does not have this style in its container. It's an a element inside the dropdown div.

One way to change this is to have your custom styles.css file imported after the default bootstrap css and override this specific property, like this:

import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";

And inside the styles.css file, insert:

div.dropdown.nav-item > a {
 color: red;
}

There are many other ways to do that, please refer to the Theming section of the React-Bootstrap documentation for more elegant solutions.

Upvotes: 1

Related Questions