Search code examples
cssreactjsbootstrap-4react-bootstrap

How to change background colour of this react bootstrap button?

<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.

Solution

  • 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.