Question

我是React的新手。

我正在尝试使用React-Bootstrap Modal组件创建2种不同样式的Modals：一个带有橙色标题，另一个带有白色标题（也就是没有标题）。

使用的模态样式取决于它的使用位置。例如，我希望白色标题显示为登录和退出，只有那两个模态。现在，.modal-header CSS似乎应用于Modal.Header的任何声明的默认样式。我的modal-header类具有橙色标题的样式：

.modal-header {
  color: #fff;
    background-image: linear-gradient(255deg, #f9b25e, #f17b30);
}

我不希望将此样式应用于注册和登录模式。我尝试创建这个新的CSS ID modal-no-header并将其添加到注册和注销js文件中的Modal.Header声明中：

在我的CSS中：

    #modal-no-header{
    background-color:#fff !important;
}

SignupModal.js中的

：

render() {
    return (
      <Modal show={this.props.showModal} onHide={this.props.closeModal} >
        <Modal.Header id="modal-no-header" closeButton>
        </Modal.Header>
        <Modal.Body> blah... <Modal.Body>
     </Modal>
    )
}

但是，＃modal-no-header样式不会覆盖默认的.modal-header类：

not working, inspect element screenshot included

问题：这是在React-Bootstrap中为Modal组件指定多个样式的正确方法吗？如果没有，是否有更好的方法，你如何去做？我检查了文档，但无法发现任何有用的信息。提前谢谢。

如何将不同的样式应用于React-Bootstrap Modal组件的Modal.Header？

0 个答案: