Comment ignorer la police par défaut de React-Bootstrap ?

Question

Je développe une application React et je viens d'ajouter quelques composants d'amorçage React. Le problème est que la police bootstrap par défaut affecte tout mon texte. Je n'ai trouvé qu'une seule solution en ligne qui suggérait de lier le CSS dans le fichier d'entrée et d'y placer l'importation de polices et les propriétés de police CSS, mais cela n'a rien changé pour moi. Voici la mise en page que j'ai importée dans Index.js :

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"

Comme suggéré ci-dessous, j'ai des importations bootstrap en plus des importations de feuilles de style. index.css contient

@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;
  }

Cependant, React-bootstrap écrit toujours mes styles de police dans la police la plus moche que j'ai jamais vue.

Cela affecte toutes les polices de mon BrowserRouter. Ma barre de navigation et mon pied de page ne sont pas affectés. J'ai même essayé de mettre les styles au niveau des composants de la police. Bootstrap le remplacera toujours.

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(
  
    
      
    
  
)

L'ordre des importations est important, si vous importez bootstrap après votre fichier CSS, alors les styles boostrap remplaceront vos styles. Mettez donc à jour vos importations comme indiqué ci-dessus.

Voici le lien vers le Sandbox