[React-bootstrap] 모달창 닫기버튼 스타일이 깨지는 현상

 

 

 

안녕하세요 주갬입니다.

 

오늘은 react-bootstrap을 이용 중에 모달창 닫기버튼 스타일이 깨지는 현상을 해결한 방법에 대해 말씀드리려고 합니다. 

 

 

 

---

 

 

 

 

다른 bootstrap 요소들은 잘 나오는데 모달창 안에 있는 닫기 버튼만 스타일이 깨지는 현상이 발생했습니다.

 

 

 

 

원래는 이렇게 예쁜 닫기버튼이 나와야합니다.

 

 

 

---

 

 

구글링을 해본 결과

 

이 현상은 bootstrap 버전과 react-bootstrap 버전이 맞지 않을 때 발생한다고 합니다.

 

https://stackoverflow.com/questions/65472384/react-bootstrap-only-close-button-styling-not-working

React-Bootstrap ONLY Close Button Styling Not Working

 

 

 

 

node_modules폴더 안의 react-bootstrap 폴더 안에 있는 package.json을 보시면 react-bootstrap의 버전을 확인하실 수 있습니다.

 

 

react-bootstrap과 호환되는 bootstrap 버전은 다음과 같습니다.

• react-bootstrap@2 => bootstrap@5
• react-bootstrap@1.6.1 => bootstrap@4
• react-bootstrap@0.33.1 => bootstrap@3

 

 

저의 경우 bootstrap은 4버전을 연결해 놓았었지만 react-bootstrap은 2버전을 설치해서 오류가 났던 것이였습니다.

 

 

react-bootstrap을 이용하시는 분들은 bootstrap의 버전을 잘 확인해보시면 좋을 것 같습니다.

 

 

 

 

---

 

 

 

감사합니다.