Add additional class to bootstrap modal in react

Question

I need to add some extra classes in the react-bootstrap modal. Right now my modal gets rendered like this.

<div role="dialog" aria-modal="true" class="fade modal show" tabindex="-1">
<div id="blockVenue" role="document" class="modal-dialog planModal modal-dialog-centered">
<div class="modal-content">
<div class="modal-body"></div>
</div>
</div>

I want to add a class with the first div container.

<div role="dialog" aria-modal="true" class=" custom-class fade modal show" tabindex="-1">

I used ' dialogClassName="planModal" ' property to add class to the container but it adds class to some internal div.

Answer 1

According to there official website you can pass className for adding that:

Here is the demo:https://codesandbox.io/s/sharp-dust-7po0f?file=/src/App.js

import React, { useState } from "react";
import { Modal, Button } from "react-bootstrap";
import "./styles.css";

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} className="planModal" onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Example />
    </div>
  );
}