[Reactstrap] Modal 컴포넌트 CSS 수정하기

모달에 Custom CSS 적용을 위한 props를 아래와 같이 제공한다.

필요한 속성에 맞게 사용하면 되지만, 모달 위치 및 리사이징을 위해서는 className, contentClassName을 수정해야 한다.

 

Props

  className: YourCustomClass,
  wrapClassName: YourCustomClass,
  modalClassName: YourCustomClass,
  backdropClassName: YourCustomClass,
  contentClassName: YourCustomClass

 

작성 예시 

      <Modal
        isOpen={modal}
        toggle={toggle}
        zIndex="310"
        className="custom-modal"
        contentClassName="modal-wrapper"
      >
        <ModalContents>
          <Form>
            <FormGroup>
              <Label for="theme">대시보드 테마</Label>
              <Input type="select" name="select" id="theme">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </Input>
            </FormGroup>
            <FormGroup>
              <Label for="name">대시보드 이름</Label>
              <Input
                type="text"
                name="name"
                id="name"
                placeholder="대시보드 이름"
              />
            </FormGroup>
          </Form>
        </ModalContents>
      </Modal>

 

 

(참고자료) 

• stackoverflow.com/questions/55073427/how-to-change-the-style-of-a-reactstrap-modal-in-react
• dev.to/itz_giddy/the-right-way-to-resize-reactstrap-s-modal-component-302o