我正在开发一个反应应用程序，我刚刚添加了一些反应引导组件。问题是默认的引导字体影响了我的所有文本。我在网上只找到了一种解决方案，建议在入口文件中链接 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 样式将覆盖您的样式。因此，请如上所示更新您的导入。
这里是沙箱的链接