在 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-bootstrap
和 reactstrap
庫提供了很多定製機會,但它們的元件仍然只接受有限數量的 props
,這可能會限制某些人。
一般來說,在這裡和那裡使用 Bootstrap CSS 沒有任何問題。但是,如果你只使用少量的 Bootstrap CSS,那麼匯入整個庫可能不值得。
最好找另一個框架或自己編寫那些自定義樣式。
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