2

我是反应新手。

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

2 种类型的标题 img

使用的模态样式取决于它的使用位置。例如，我希望在登录和注销时出现白色标题，并且只显示这 2 个模式。现在，.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 类：

不工作，包括检查元素截图

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

4

0 回答 0