Ufdjrw

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.

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

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