React-Bootstrap 기본 글꼴을 무시하는 방법은 무엇입니까?

Question

저는 반응 앱을 개발 중인데 방금 반응 부트스트랩 구성 요소를 추가했습니다. 문제는 기본 부트스트랩 글꼴이 내 모든 텍스트에 영향을 미친다는 것입니다. 항목 파일에 CSS를 연결하고 거기에 글꼴 가져오기 및 CSS 글꼴 속성을 넣는 것을 제안하는 솔루션을 온라인에서 하나만 찾았지만 이로 인해 아무 것도 변경되지 않았습니다. 이것은 Index.js에서 가져온 레이아웃입니다.

으아아아

아래 제안된 대로 스타일시트 가져오기 외에 부트스트랩 가져오기도 있습니다. index.css에는

가 포함되어 있습니다. 으아아아

그러나 React-bootstrap은 여전히 ​​내가 본 것 중 가장 보기 흉한 글꼴로 내 글꼴 스타일을 작성합니다.

내 BrowserRouter 내의 모든 글꼴에 영향을 미칩니다. 내 탐색 표시줄과 바닥글은 영향을 받지 않습니다. 심지어 글꼴의 구성 요소 수준에 스타일을 적용해 보았습니다. 부트스트랩은 여전히 ​​이를 무시합니다.

CodeSandbox: https://codesandbox.io/s/exciting-moser-pdoq66?file=/src/index.js

Answer 1

으아악

가져오기 순서가 중요합니다. CSS 파일 다음에 부트스트랩을 가져오면 부스트랩 스타일이 스타일을 재정의합니다. 따라서 위에 표시된 대로 가져오기를 업데이트하세요.

다음은 Sandbox

링크입니다.