在 React 應用程式中匯入 Bootstrap CSS

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中匯入和使用 Bootstrap CSS 來設定 create-react-app
  2. 在 React 中匯入和使用 Bootstrap CSS 進行自定義 Webpack 配置
在 React 應用程式中匯入 Bootstrap CSS

從頭開始建立和設定 React 元件的樣式可能是一個耗時的過程。這就是為什麼這麼多 React 開發人員依賴像 Bootstrap 這樣的外部庫來設定他們的元件樣式的原因。

這些庫激發了 UI 元件的樣式,例如按鈕和輸入欄位。

安裝 Bootstrap 不會使其樣式在你的應用程式中自動可用;你仍然需要匯入庫。

在你的 React 應用程式中使用 Bootstrap 的確切過程取決於你的設定和環境。本文將探討使庫在你的應用程式中可用的最常見解決方案。

在 React 中匯入和使用 Bootstrap CSS 來設定 create-react-app

create-react-app 設定使匯入和使用 Bootstrap CSS 變得容易。如果你像大多數初學者 React 開發人員一樣使用此環境,那麼你只需遵循簡單的步驟。

首先,你必須安裝 Bootstrap。

npm install bootstrap

下一步是匯入 CSS 檔案。為此,你必須使用 import 語句。

你必須在 index.js 檔案中匯入 Bootstrap CSS 檔案,該檔案包含整個元件樹。一旦你找到了這個檔案,你所要做的就是在頂部新增 import 語句。

import 'bootstrap/dist/css/bootstrap.min.css';

完成後,你可以使用 Bootstrap CSS 中的樣式和類。請記住,在 React 中,class 是一個保留字,因此我們使用 className 屬性將類應用於元素。

在 React 中匯入和使用 Bootstrap CSS 進行自定義 Webpack 配置

如果你使用自定義 webpack 配置,你必須找到配置檔案並將另一個物件新增到 loaders 陣列。實物如下。

{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
 }

你還需要安裝 Bootstrap 庫本身。

一旦你安裝了它並編輯了 webpack 配置,就只剩下一步了。你必須在 index.js 檔案中匯入 Bootstrap CSS 和 JS 檔案。

找到檔案後,應在頂部新增以下內容。

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

完成後,你可以在 React 中使用樣式和基於 jQuery 的元素。但是,React 不能很好地與 jQuery 和其他 JavaScript 工具配合使用。

這是因為 jQuery 和類似的庫在 React 框架的邊界之外改變了狀態,這使得 React 很難跟蹤狀態變化。所以避免在 React 中使用基於 jQuery 的元素。

用於 React 的 Bootstrap 庫

許多 Web 開發人員喜歡使用 Bootstrap 的穩定性和靈活性。然而,正如我們之前提到的,CSS 庫不能很好地與 React 結合。

有兩個優秀的庫受 Bootstrap 的啟發,但被定製為與 React 相容。

react-bootstrap 庫是 Bootstrap 的修訂版。它提供了自定義元件,而不是傳統的 jQuery 和 CSS,這些元件提供了許多主要的庫功能。

它允許開發人員自定義 React 應用程式的感覺、功能和外觀。該包是輕量級的,更重要的是,它允許你匯入特定的模組。

例如,如果你不需要其他任何東西,你可以只匯入自定義的 Button 元件。

reactstrap 是另一個庫,旨在在你的 React 應用程式中提供 Bootstrap 的特性和功能。你可以使用 npm 安裝它或通過 CDN 包含它。

這個庫沒有它的樣式,但會對主 Bootstrap 庫的樣式定義做出 React。

react-bootstrap 一樣,它允許你匯入特定的自定義元件。你可以使用許多 props 來自定義自定義元件的功能和外觀。

在 React 中你應該使用 Bootstrap

許多 React 開發人員選擇其他替代方案,例如 Material UI 而不是受 Bootstrap 影響的庫。

儘管 react-bootstrapreactstrap 庫提供了很多定製機會,但它們的元件仍然只接受有限數量的 props,這可能會限制某些人。

一般來說,在這裡和那裡使用 Bootstrap CSS 沒有任何問題。但是,如果你只使用少量的 Bootstrap CSS,那麼匯入整個庫可能不值得。

最好找另一個框架或自己編寫那些自定義樣式。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn