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

Question

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.

Try with !important .modal-dialog { width: 100% !important; margin-top: 10% !important; } — Hemadri Dasari
– Hemadri Dasari, Commented Mar 9, 2019 at 2:32

sathish kumar · Accepted Answer · 2019-03-09 02:43:27Z

3

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

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

answered Mar 9, 2019 at 2:43

sathish kumar

1,5171 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nima Over a year ago

But this solution is not working in reactstrap modal. It looks that only "style" will work and className not work in modal.

CicheR Over a year ago

This is the solution. Then, you have to use the classes correctly 🤓🤙

moztemur · Accepted Answer · 2020-01-23 10:33:31Z

3

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}
>
...

answered Jan 23, 2020 at 10:33

moztemur

1,0011 gold badge12 silver badges23 bronze badges

Comments

Yu Hao · Accepted Answer · 2021-05-18 07:14:22Z

0

This worked for me

<Modal ClassName={`customClass`} />

edited May 18, 2021 at 7:14

Yu Hao

123k50 gold badges253 silver badges305 bronze badges

answered May 17, 2021 at 12:36

Hari Prasath S

793 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related