如何使用 React 将 Bootstrap Modal 的大小调整为自定义大小

Question

我希望在网站上使用 Bootstrap 的 Modal React 组件。

我想手动将组件的宽度设置为 X 个像素。

如果可以使用 .jsx 文件中的 const 对象来设置 css，那将是首选！但是，如果必须，我可以使用 .css 文件。

这是我当前的 React 代码：

import React, { Component } from "react";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
import "./profile.css";

class Profile extends React.Component {
  state = {
    show: false
  };

  handleShow = () => {
    this.setState({ show: true });
  };

  handleHide = () => {
    this.setState({ show: false });
  };

  render() {
    return (
      <React.Fragment>
        <Button variant="primary" onClick={this.handleShow}>
          Profile
        </Button>

        <Modal
          show={this.state.show}
          onHide={this.handleHide}
          dialogClassName="custom-modal"
          aria-labelledby="example-custom-modal-styling-title"
        >
          <Modal.Header closeButton>
            <Modal.Title id="example-custom-modal-styling-title">
              Custom Modal Styling
            </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>
      </React.Fragment>
    );
  }
}

export default Profile;

这是我拥有的 css：

.custom-modal {
  width: 80% !important;
  height: 1500px !important;
  color: orange;
}

这是结果，您可以看到它不是所需的宽度。 Click here to see

谢谢大家

Answer 1

已修复，只是在 html 文档上出现“%”符号的问题。我改为使用“vw”，它解决了我的问题！