如何忽略React-Bootstrap默认字体?

Question

我正在制作一个react应用程序，我刚刚添加了一些react引导组件。问题是默认的引导字体影响了我所有的文本。我只在网上找到了一个解决方案，建议在入口文件中链接一个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"

如下所示，我将bootstrap导入置于样式表导入之上。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(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
)

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

这是沙盒的链接