我正在開發一個反應應用程序，我剛剛添加了一些反應引導元件。問題是預設的引導字體影響了我的所有文字。我在網路上只找到了一種解決方案，建議在入口檔案中連結 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
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 樣式將覆寫您的樣式。因此，請如上所示更新您的匯入。
這裡是沙箱的連結