如何更改反应引导模式的背景颜色答案

【问题标题】：How to change background color of react bootstrap modal如何更改反应引导模式的背景颜色
【发布时间】：2019-09-27 09:23:43
【问题描述】：

我想改变 react bootstrap modal popup 的背景颜色。

我的模态代码是 -

<Modal
    show={this.state.show}
    onHide={this.handleClose}
    dialogClassName="modal-90w public-profile-modal-class"
    size='lg'
    aria-labelledby="example-custom-modal-styling-title"
>

那么怎么改呢？

【问题讨论】：

自定义 '.modal-backdrop' 样式。
但这会改变所有模态的背景..我只想改变一个特定的模态
使用 'dialogClassName' 这个道具将自定义类添加到对话框中。 “.modal-90w public-profile-modal-class .modal-backdrop {背景颜色：红色}”

标签： reactjs react-bootstrap

【解决方案1】：

如果你想更新模态背景，你可以使用 CSS 像：

.modal-backdrop {
  background-color: green;
}

如果您想更改模态背景，请使用：

<Modal className="my-modal" show={show}>

并在 CSS 中定义：

.my-modal .modal-content {
  background-color: red;
}

【讨论】：

我想改变模态弹窗的背景颜色
@AnuragMishra - 刚刚根据您的要求更新了代码。
但这会改变所有模态的背景..我只想改变一个特定的模态
我已经定义了一个类 my-modal 并且 css 应用于该模式。对于所有模态，这不会改变，仅适用于使用类 my-modal 的模态

【解决方案2】：

您需要将CSS 应用到modal-content 类以更改background-color。

将类名添加到要应用背景颜色的模态中，

<Modal
    show={this.state.show}
    onHide={this.handleClose}
    dialogClassName="modal-90w public-profile-modal-class"
    size='lg'
    aria-labelledby="example-custom-modal-styling-title"
    className="special_modal" //Add class name here
>

使用该类名申请CSS

.special_modal .modal-content{
   background-color: #000;
   color: #fff;
}

Demo

【讨论】：

但这会改变所有模态的背景..我只想改变一个特定的模态
在这种情况下，您可以将特殊的 className 应用于该模式并将 CSS 应用于该 className。
那我该怎么做呢？
@AnuragMishra，查看演示。

【解决方案3】：

在标签本身添加：style={{ background: 'red' }}

<Modal
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
  style={{ background: 'red' }}
>

【讨论】：

【解决方案4】：

<Modal.body>
    <div className="modal-background-color">
       //Your content
    </div>
</Modal.body>

在你的css中添加如下：

.modal-background-color{
    background:red;
}

【讨论】：

【解决方案5】：

默认颜色为白色。我找到了一种改变颜色的方法，你也可以让它透明，即：

.modal-content { background-color: transparent !important;}

只需将此属性粘贴到您的 css 文件中，您也可以使用其他颜色代替透明。

【讨论】：