I'm new to React.
I'm trying to create 2 different styles of Modals with the React-Bootstrap Modal component: one with an orange header, and another white header (aka no header).
The style of modal used depends on where it's used. For example, I want the white header to appear for sign in and sign out, and only those 2 modals. Right now, the .modal-header CSS seems like the default style applied to any declaration of Modal.Header. My modal-header class has styling for the orange header:
.modal-header {
color: #fff;
background-image: linear-gradient(255deg, #f9b25e, #f17b30);
}
I don't want this style applied to the sign up and sign in modals. I tried creating this new CSS ID modal-no-header and adding it to the Modal.Header declaration in the signup and signout js files:
in my CSS:
#modal-no-header{
background-color:#fff !important;
}
in 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>
)
}
However, the #modal-no-header styling isn't overriding the default .modal-header class:
not working, inspect element screenshot included
Question: Is this the right way to specify multiple styles for Modal components in React-Bootstrap? If not, is there a better method and how do you go about it? I checked out the documentation but wasn't able to spot anything helpful. Thanks in advance.
