如何在ReactJS專案中使用Bootswatch為網頁新增主題？

首先，我們需要使用npm安裝react-bootstrap和bootswatch包。接下來，我們從bootswatch匯入所需的主題，並使用“import”和“className”屬性將其應用於我們的React元件。最後，我們可以透過簡單地更改匯入的主題來輕鬆切換主題。

讓我們首先了解什麼是Bootswatch。

什麼是Bootswatch？

Bootswatch 是一個免費且開源的 Bootstrap 主題集合，Bootstrap 是一個流行的前端開發框架。
這些主題有多種風格，例如材質設計、扁平化和暗黑模式。
Bootswatch 主題易於安裝和定製，允許開發者快速更改網頁的外觀。
Bootswatch 主題可用於建立響應式和移動友好的網站和 Web 應用。
Bootswatch 與 Bootstrap 版本 4 相容，可用於任何 Web 開發專案，包括 ReactJS、Angular 和 Vue.js。

什麼是ReactJS？

React是一個用於構建使用者介面的JavaScript庫。它使建立互動式UI變得容易。為應用程式中的每個狀態設計簡單的檢視，當你的資料發生變化時，React將高效地更新和渲染正確的元件。你還可以構建管理自身狀態的封裝元件，然後將它們組合起來建立複雜的UI。

ReactJS 可以建立小型和大型的複雜應用程式。它提供了一個基本但可靠的功能集，可以快速啟動 Web 應用程式。它易於掌握現代和遺留應用程式，並且是更快地編寫功能的方法。React 提供了大量現成的元件。

要開始，首先建立一個新的ReactJS應用程式，並在我們的開發伺服器上執行它，如下所示：

npx create-react-app theme-app
cd theme-app
npm start

方法

首先透過在終端中執行命令npm install bootstrap bootswatch將Bootswatch和bootstrap安裝到你的ReactJS專案中。
接下來，在專案的index.js檔案或App.js檔案中匯入Bootswatch CSS檔案。你可以透過新增以下程式碼行來完成此操作：

import 'bootswatch/dist/<themename>/bootstrap.min.css';

將<themename>替換為你想要使用的Bootswatch主題，例如，“cerulean”、“cosmo”或“darkly”。
匯入CSS檔案後，執行專案時，你應該會看到主題應用於你的網頁。
要更改主題，只需更改import語句中的主題名稱並重新執行專案。
你還可以透過將CSS檔案匯入到這些特定元件或頁面中，將不同的主題應用於不同的元件或頁面。
最後，確保你已經在你專案中包含了 Bootstrap CSS 檔案。這可以透過在專案的 index.js 檔案或 App.js 檔案中新增 `import 'bootstrap/dist/css/bootstrap.min.css';` 來完成。

示例

以下是如何將Bootswatch主題新增到你的ReactJS專案的示例：

App.js：

import React from "react";
import "./style.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootswatch/dist/darkly/bootstrap.min.css';
export default function App() {
   return (
      <div>
         <h1>Hello World!</h1>
         <p>This is my first ReactJS application </p>
      </div>
   );
}

現在，當你執行你的專案時，“darkly”主題將應用於你的網頁。

你可以將“darkly”替換為任何其他主題名稱（例如“cerulean”或“cosmo”）來更改主題。