How to override bootstrap 5 modal scss property in react

Question

Here I have use case to have a modal on the page header. since the page header has position:fixed bootstrap modal backdrop is overlayed at the top so unable to do any action.

Found one solution override bootstrap 5 CSS property z-index:0 for Modal but unable to override it.

Modal.jsx

import { useRef } from "react";
import "./Modal.scss";
import { Modal as BootstrapModal } from "bootstrap";
export default function Modal() {
  const modalRef = useRef();

  const showModal = () => {
    const modalEle = modalRef.current;
    const bsModal = new BootstrapModal(modalEle, {
      backdrop: "static",
      keyboard: false
    });
    bsModal.show();
  };

  const hideModal = () => {
    const modalEle = modalRef.current;
    const bsModal = BootstrapModal.getInstance(modalEle);
    bsModal.hide();
  };

  return (
    <div>
      <button onClick={showModal} >SHOW MODAL</button>
      <div className="modal fade" ref={modalRef} tabIndex="-1">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header bg-dark ">
              <button
                type="button"
                className="btn-close btn-close-white"
                onClick={hideModal}
                aria-label="Close"
              ></button>
            </div>
            <div className="modal-body modal__body">
            text
            </div>
            
          </div>
        </div>
      </div>
    </div>
  );
}

Modal.scss

.modal-backdrop {
   z-index: 0; 
}

codesandbox link

P.S : only bootstrap 5 not include react-bootstrap

Answer 1

Solution

this worked for me.

@import '../../../assests/scss/variables';

.modal-backdrop.show {
  z-index: 0 !important;
}