如何忽略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 样式将覆盖您的样式。因此，请如上所示更新您的导入。

这里是沙箱的链接