如何在 ReactJS 项目中使用 Bootswatch 为您的网页添加主题？

我们可以使用 Bootwatch为 ReactJS 项目添加即时主题。

Bootswatch：它 是一个开源项目，它为 Web 开发人员可以使用的引导程序提供了许多免费主题。它可以帮助开发人员获得正确的 UI，而无需花费数小时和精力来设计不同元素的样式。

先决条件：

1. ReactJS 介绍和工作
2. ReactJS 搭建开发环境

按照给定的链接开始。向下滚动一点，主题将出现。一些最常用的主题是宇宙，黑暗。

关联：

https://bootswatch.com/

项目结构：

在 ReactJS 项目中安装 Bootswatch：

1. 单击预览按钮可以更广泛地了解不同的组件，例如表单、下拉列表和其他组件，以查看如果我们使用此特定主题，这些组件将如何显示。
2. 选择主题后，点击下载按钮，下载bootstrap.min.css文件。
3. 在您的 react.js 文件夹中打开终端，写入命令，这将在您的应用程序中安装 react-bootstrap。

   npm install react-bootstrap bootstrap

4. 作为例子，我们选择 Cyborg 或 https://bootswatch.com/cyborg/ 是选择的主题。现在添加下载bootstrap.min.css文件，src文件夹中。
5. 在index.js 中导入bootstrap.min.css 文件。
   Filename- index.js：这里我们只导入bootstrap.min.css。现在主题适用于整个应用程序。

   Javascript

   import React from 'react';
   import ReactDOM from 'react-dom';
   import './index.css';
   import App from './App';
   import reportWebVitals from './reportWebVitals';
     
   // Import downloaded theme
   import './bootstrap.min.css';
     
   ReactDOM.render(
     
       
     ,
     document.getElementById('root')
   );
   reportWebVitals();

6. 在src文件夹中创建另一个文件夹Components并在其中创建一个文件并将其命名为Home.js它将成为我们的功能组件。
7. 在文件中创建一个功能组件，如下所示。现在在你的 react.js 应用程序中添加任何引导组件，它将根据主题设置样式。

   文件名- Home.js：

   Javascript

   import React from 'react';
   import {Image , Row} from 'react-bootstrap';
     
   const Home = () => {
     
       return (
           
   
               
   Welcome to GeeksforGeeks
    
               
   Let's Learn
     
               {/* aligning the image at the center */}
               
                  
               
           
       )
   }
     
   export default Home
   

8. 现在我们只需要在 App.js 根组件中导入 Home.js 组件。

   Filename- App.js：从这个文件中删除不必要的东西并添加以下代码。

   Javascript

   import './App.css';
   // Importing Home component
   import Home from './component/Home';
     
   function App() {
     return (
       
   
         
       
     );
   }
     
   export default App;
   

启动服务器：运行以下命令启动服务器。

npm start

输出：应用的主题是 Cyborg(黑暗主题)，这里是输出。