How to change background colour of this react bootstrap button?

Mohd Zaid 0
Viewed 23
<DropdownButton 

                alignRight

                title={location}

                id="dropdown-menu-align-right"

                onSelect={(e)=>{setlocation(e)}}

                
            >

                <Dropdown.Item eventKey="USA">USA</Dropdown.Item>

                <Dropdown.Item eventKey="India">India</Dropdown.Item>

                <Dropdown.Item eventKey="UK">UK</Dropdown.Item>
            </DropdownButton>

This button is displayed Blue as default. Now when I change its colour by giving <DropdownButton> tag a class, its only not changing the colour properly. Here's an image on what's happening enter image description here

I have tried this but it doesn't work:

    <DropdownButton 

            alignRight

            title={location}

            id="dropdown-menu-align-right"

            onSelect={(e)=>{setlocation(e)}}

            className="Drop"
            
        >

            <Dropdown.Item eventKey="USA">USA</Dropdown.Item>

            <Dropdown.Item eventKey="India">India</Dropdown.Item>

            <Dropdown.Item eventKey="UK">UK</Dropdown.Item>
        </DropdownButton>

CSS:

.Drop{
background-color: #9063CD !important;
}

I want to change the default blue colour to something else.

react-bootstrap bootstrap-4 reactjs css
2 Answers

Use !important in your CSS to overlap the predefined bootstrap CSS. Sometimes your CSS conflicts the bootstrap CSS , this can be overcome by using the keyword !important right infront of you CSS property.

userwLAe10

I have no knowledge with react, it may possible that my answer don't solve your issue. I apologize for this first.

Seeing your output through image, it is clear that the class you are adding in any parent element, not the button itself. Try adding the class in the button itself or you can add css like ".Drop button{}" or ".Drop a{} " or whatever your tag is.

Again sorry, if I said anything irrelevant.

Alivia Pramanik0
Related