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%;
  }

我在Internet上搜索以找到此问题的解决方案。但是我找不到任何合理的解决方案。如果您能帮助我，那对我来说将是极大的荣幸。

Answer 1

只需将道具modalClassName设置为modal-dialog即可解决问题。

<Modal
   modalClassName="modal-dialog"
   isOpen={this.state.modal}
   fade={false}
   toggle={this.toggle}
>
...

Answer 2

这些是可用于reactstrap模态api的道具， Reference here

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

Answer 3

这对我有用

<Modal ClassName={`customClass`} />

如何更改react中的reactstrap模态样式？

3 个答案: