Bagaimana untuk mengabaikan fon lalai React-Bootstrap?

Question

Saya sedang membangunkan apl react dan saya baru sahaja menambahkan beberapa komponen bootstrap react. Masalahnya ialah fon bootstrap lalai mempengaruhi semua teks saya. Saya hanya menemui satu penyelesaian dalam talian yang mencadangkan memautkan css dalam fail entri dan meletakkan import fon dan sifat fon css di sana, tetapi ini tidak mengubah apa-apa untuk saya. Ini ialah reka letak yang saya import dalam 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"

Seperti yang dicadangkan di bawah, saya mempunyai import bootstrap sebagai tambahan kepada import helaian gaya. index.css mengandungi

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

Walau bagaimanapun, React-bootstrap masih menulis gaya fon saya dalam fon paling hodoh yang pernah saya lihat.

Ia menjejaskan semua fon dalam BrowserRouter saya. Navbar dan footer saya tidak terjejas. Saya juga cuba meletakkan gaya pada tahap komponen fon. Bootstrap masih akan mengatasinya.

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

Susunan import adalah penting, jika anda mengimport bootstrap selepas fail css anda, maka gaya boostrap akan mengatasi gaya anda. Jadi kemas kini import anda seperti yang ditunjukkan di atas.

Berikut ialah pautan ke Kotak pasir