CODEWITHSUNDEEP
reactjsreactstrap
dwp
dwp

Reputation: 958

How to change The style of a reactstrap modal in react?

Problem:

I have created A reactstrap Modal and now I want to add a custom styling to it so that I had a class and wrote CSS styling but it does not seem to work. Can someone help me to solve this problem?. This is my code.

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;

This is my CSS.

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

I searched On the Internet to find a Solution to this problem. But I was unable to find any reasonable solution to this problem. If you can help me It would be a great pleasure for me.

Upvotes: 4

Views: 12370

Answers (3)

Hari Prasath S
Hari Prasath S

Reputation: 79

This worked for me

<Modal ClassName={`customClass`} />

Upvotes: 0

moztemur
moztemur

Reputation: 981

Just setting the prop modalClassName as modal-dialog would do the trick.

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

Upvotes: 3

sathish kumar
sathish kumar

Reputation: 1507

These are the props available for reactstrap modal api, Reference here

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

Upvotes: 3

Related Questions