React-Bootstrapのデフォルトフォントを無視するにはどうすればよいですか?

Question

私は反応アプリを開発していて、いくつかの反応ブートストラップ コンポーネントを追加したところです。問題は、デフォルトのブートストラップ フォントがすべてのテキストに影響を与えることです。オンラインで見つけた解決策は 1 つだけで、エントリ ファイルに CSS をリンクし、そこにフォント インポートと CSS フォント プロパティを置くことを提案していましたが、これでは何も変わりませんでした。 これは Index.js にインポートしたレイアウトです:

リーリー

以下に提案されているように、スタイルシートのインポートの上にブートストラップのインポートがあります。 Index.css には

が含まれています リーリー

しかし、React-bootstrap は依然として私のフォント スタイルを私がこれまで見た中で最も醜いフォントで書きます。

これは、BrowserRouter 内のすべてのフォントに影響します。ナビゲーションバーとフッターは影響を受けません。フォントのコンポーネントレベルにスタイルを入れてみたりもしました。ブートストラップは引き続きそれをオーバーライドします。

コードサンドボックス: https://codesandbox.io/s/exciting-moser-pdoq66?file=/src/index.js

Answer 1

リーリー

インポートの順序は重要です。CSS ファイルの後にブートストラップをインポートすると、ブースストラップ スタイルがスタイルをオーバーライドします。したがって、上記のようにインポートを更新します。

ここに サンドボックスへのリンクがあります