如何忽略React-Bootstrap預設字體？

Question

我正在開發一個反應應用程序，我剛剛添加了一些反應引導元件。問題是預設的引導字體影響了我的所有文字。我在網路上只找到了一種解決方案，建議在入口檔案中連結 css 並將字體匯入和 css 字體屬性放在那裡，但這對我來說沒有任何改變。 這是我在 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"

正如下面所建議的，我在樣式表導入之上有引導導入。 index.css 包含

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

然而，React-bootstrap 仍然用我見過的最醜的字體來寫我的字體樣式。

它會影響我的 BrowserRouter 內的所有字體。我的導覽列和頁腳不受影響。我什至嘗試將樣式放在字體的元件層級。 Bootstrap 仍然會覆蓋它。

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 樣式將覆寫您的樣式。因此，請如上所示更新您的匯入。

這裡是沙箱的連結