reactjs - 如何改变reactstrap模态的样式？

Question

问题:

我已经创建了一个reactstrap Modal，现在我想为其添加自定义样式，以便我有一个类并编写CSS样式，但它似乎不起作用。有人可以帮我解决这个问题吗？这是我的代码。

import React, { Component } from "react";
import {
  Card,
  CardText,
  Container,
  Row,
  Col,
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter
} from "reactstrap";

import "./Dashbord.css";

class YearCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  render() {
    return (
      <Card className="year">
        <Container>
          <CardText className="year-text">Year</CardText>
        </Container>
        <div className="year-full-screen" onClick={this.toggle}>
          <i className="fas fa-expand-arrows-alt" />
        </div>
        <Modal
          className="modal-dialog"
          isOpen={this.state.modal}
          fade={false}
          toggle={this.toggle}
        >
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>My Modal</ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>
              Do Something
            </Button>{" "}
            <Button color="secondary" onClick={this.toggle}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
        <hr className="horizentel-line" />
      </Card>
    );
  }
}

export default YearCard;

这是我的 CSS。

 .modal-dialog {
    width: 100%;
    margin-top: 10%;
  }

我在互联网上搜索了此问题的解决方案。但我无法找到任何合理的解决方案来解决这个问题。如果你能帮助我，我将感到非常高兴。

Answer 1

这些是reactstrap modal api可用的props， Reference here

<Modal 
  className: YourCustomClass,
  wrapClassName: YourCustomClass,
  modalClassName: YourCustomClass,
  backdropClassName: YourCustomClass,
  contentClassName: YourCustomClass
/>