Wie ignoriere ich die Standardschriftart von React-Bootstrap?

Question

Ich entwickle eine React-App und habe gerade einige React-Bootstrap-Komponenten hinzugefügt. Das Problem ist, dass sich die Standard-Bootstrap-Schriftart auf meinen gesamten Text auswirkt. Ich habe online nur eine Lösung gefunden, die vorschlug, das CSS in der Eintragsdatei zu verknüpfen und dort den Schriftartimport und die CSS-Schriftarteigenschaften abzulegen, aber das hat für mich nichts geändert. Dies ist das Layout, das ich in Index.js importiert habe:

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { BrowserRouter } from "react-router-dom"


import 'bootstrap/dist/css/bootstrap.min.css';
import "./stylesheets/index.css"

Wie unten vorgeschlagen, habe ich Bootstrap-Importe zusätzlich zu den Stylesheet-Importen. index.css enthält

@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

  * {
      box-sizing: border-box;
  }
  
  body {
    margin: 0;
    background-color: #7f0b0d;
    font-family: 'Kanit', sans-serif;
  }

Allerdings schreibt React-bootstrap meine Schriftstile immer noch in der hässlichsten Schriftart, die ich je gesehen habe.

Es betrifft alle Schriftarten in meinem BrowserRouter. Meine Navigationsleiste und Fußzeile sind davon nicht betroffen. Ich habe sogar versucht, die Stile auf Komponentenebene der Schriftart zu platzieren. Bootstrap wird es immer noch überschreiben.

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

Answer 1

import ReactDOM from "react-dom/client"
import App from "./App"
import "bootstrap/dist/css/bootstrap.min.css";
import "./stylesheets/index.css"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  
    
      
    
  
)

导入的顺序很重要，如果您在 css 文件之后导入了 bootstrap，那么 boostrap 样式将覆盖您的样式。因此，请如上所示更新您的导入。

这里是沙箱的链接