Necesito agregar algunas clases adicionales en el modal react-bootstrap. En este momento, mi modal se renderiza así.

<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>

Quiero agregar una clase con el primer contenedor div.

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

Usé la propiedad 'dialogClassName = "planModal"' para agregar clase al contenedor pero agrega clase a algún div interno.

0
Pranay kumar 27 ago. 2020 a las 08:48

1 respuesta

La mejor respuesta

De acuerdo con el sitio web oficial, puede pasar className por agregar eso:

Aquí está la demostración: 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>
  );
}


2
Shubham Verma 27 ago. 2020 a las 05:59