如何更改此反应引导按钮的背景颜色？答案

【问题标题】：How to change background colour of this react bootstrap button?如何更改此反应引导按钮的背景颜色？
【发布时间】：2022-09-23 01:58:57
【问题描述】：

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

此按钮默认显示为蓝色。现在，当我通过给<DropdownButton> 标记一个类来改变它的颜色时，它只是没有正确改变颜色。这是关于正在发生的事情的图片

我已经尝试过了，但它不起作用：

    <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;
}

我想将默认的蓝色更改为其他颜色。

标签： css reactjs bootstrap-4 react-bootstrap

【解决方案1】：

在你的 CSS 中使用 !important 来重叠预定义的引导 CSS。有时您的 CSS 会与引导程序 CSS 冲突，这可以通过在 CSS 属性前面使用关键字 !important 来解决。

【讨论】：

【解决方案2】：

我对反应一无所知，我的回答可能无法解决您的问题。我先为此道歉。

通过图像查看您的输出，很明显您在任何父元素中添加的类，而不是按钮本身。尝试在按钮本身中添加类，或者您可以添加诸如“.Drop button{}”或“.Drop a{}”之类的 CSS 或任何您的标签。

再次抱歉，如果我说了无关的话。

【讨论】：