はじめに

React-Bootstrap は Bootstrap 5 のスタイルをそのまま利用できますが、デザインをカスタマイズしたい場合は SCSS を活用することで、より柔軟な設定が可能です。

この記事では、SCSS を用いた React-Bootstrap のテーマカスタマイズ方法を解説します。

Bootstrap の SCSS をプロジェクトに導入する

デフォルトでは bootstrap/dist/css/bootstrap.min.css を直接読み込む形になりますが、SCSS を使用するために bootstrap/scss をインポートします。

必要なパッケージのインストール

SH
npm install sass

これで SCSS を使用できるようになります。

global.scss に Bootstrap SCSS をインポート

Next.js や React で SCSS をカスタマイズするには、global.scss などのグローバルスタイルファイルを作成し、Bootstrap の SCSS ファイルを読み込みます。

SCSS
// global.scss
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// カスタム変数の定義
$primary: #ff6600;
$secondary: #3366ff;
$body-bg: #f8f9fa;
$body-color: #333;

// Bootstrap のコンポーネントを読み込む
@import "bootstrap/scss/bootstrap";

Next.js で SCSS を適用する

Next.js の layout.js で global.scss を読み込みます。

TSX
import "../styles/global.scss";

export default function Layout({ children }) {
  return <>{children}</>;
}

こうすることで、カスタマイズした Bootstrap のテーマがアプリ全体に適用されます。

カスタムクラスの適用

React-Bootstrap のコンポーネントにカスタムクラスを適用することで、さらにデザインを変更できます。

JSX
import Button from "react-bootstrap/Button";
import styles from "../styles/custom.module.scss";

function CustomButton() {
  return <Button className={styles.customButton}>カスタムボタン</Button>;
}

export default CustomButton;

custom.module.scss

SCSS
.customButton {
  background-color: #ff6600;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: bold;
}

まとめ

SCSS を使うことで、React-Bootstrap のテーマを自由にカスタマイズできます。
変数のオーバーライドやモジュール化を活用し、プロジェクトに合ったデザインを作成しましょう。