Bootstrap の追加

ReactアプリにBootstrapを統合するために特定のライブラリを使用する必要はありませんが、Bootstrap jQueryプラグインをラップしようとするよりも簡単な場合がよくあります。React Bootstrapは、Bootstrapとの完全なパリティを目指す最も人気のあるオプションです。reactstrapは、一部の機能を犠牲にして、より小さなビルドを探しているプロジェクトにも適しています。

それぞれのプロジェクトのドキュメントサイトには、インストールと使用方法の詳細な手順が記載されています。どちらもBootstrap CSSファイルに依存しているため、それもインストールしてください。

npm install bootstrap

または、yarnを使用することもできます。

yarn add bootstrap

Bootstrap CSSおよびオプションでBootstrapテーマCSSをsrc/index.jsファイルの先頭にインポートします。

import 'bootstrap/dist/css/bootstrap.css';
// Put any other imports below so that CSS from your
// components takes precedence over default styles.

カスタムテーマの使用

注: この機能は、react-scripts@2.0.0以上で利用できます。

Bootstrap（または同等のパッケージ）の視覚スタイルを調整する必要がある場合があります。

react-scripts@2.0.0以降では、.scssファイルをインポートできます。これにより、グローバルスタイルの設定にパッケージの組み込みSass変数を使用できます。

Create React Appでscssを有効にするには、sassをインストールする必要があります。

npm install sass

または、yarnを使用することもできます。

yarn add sass

Bootstrapをカスタマイズするには、src/custom.scss（または同様の）というファイルを作成し、Bootstrapソーススタイルシートをインポートします。インポートされたファイルより前にオーバーライドを追加します。使用可能な変数の名前については、Bootstrapのドキュメントを参照してください。

// Override default variables before the import
$body-bg: #000;

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

注: 上記のように、node_modulesからモジュールを解決するために、パスの前に~を付けることができます。

最後に、デフォルトのBootstrap .cssではなく、新しく作成した.scssファイルを、たとえばsrc/index.jsファイルの先頭にインポートします。

import './custom.scss';