Así que estoy tratando de aprender sobre el modal de arranque de reacción en detalle y en la Documentación modal de arranque de reacción podemos cambiar el tamaño del modal a nuestro gusto dependiendo del css. Intenté copiar el código en mi aplicación web pero no funcionó, ¿cómo resolver esto?

Aquí está mi código:

 import {Navbar, Nav, Button, Modal, Row, Col} from 'react-bootstrap' import {useState} from 'react' import {Link} from 'react-router-dom' import '../CSS/Header.css' const Header = () => { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <> <Navbar className="MainHeader" expand="lg" variant="dark"> <Navbar.Brand className="Headerlogo" as={Link} to={"/"}> <img src="/Images/logowhite.png" alt="hotel_logo"/> </Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse className="Headerlist justify-content-end fontReg"> <Nav> <Button onClick={handleShow}>Book Now</Button> </Nav> </Navbar.Collapse> </Navbar> <Modal show={show} onHide={handleClose} animation={false} contentClassName="transparentBgClass" dialogClassName="modal-90w" aria-labelledby="example-custom-modal-styling-title" > <Modal.Header closeButton> <Modal.Title id="example-custom-modal-styling-title"> Width 90% modal tutorial </Modal.Title> </Modal.Header> <Modal.Body> <p> Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde commodi aspernatur enim, consectetur. Cumque deleniti temporibus ipsam atque a dolores quisquam quisquam adipisci possimus laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem! Mollitia reiciendis porro quo magni incidunt dolore amet atque facilis ipsum deleniti rem! </p> </Modal.Body> </Modal> </> ) }

Código para CSS:

 .modal-90w{ width: 90%; }