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

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

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

先决条件：

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

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

关联：

https://bootswatch.com/

项目结构：

在ReactJS项目中安装Bootswatch：

1. 单击预览按钮可更广泛地了解表单，下拉菜单等其他组件，以了解如果使用此特定主题，这些组件将如何显示。
2. 选择主题后，单击下载按钮以下载bootstrap.min.css文件。
3. 在react.js文件夹中，打开terminal ，编写命令，这将在应用程序中安装react-bootstrap。

   npm install react-bootstrap bootstrap

4. 例如，我们选择半机械人 或https://bootswatch.com/cyborg/是所选主题。现在，在src文件夹中添加下载的bootstrap.min.css文件。
5. 将bootstrap.min.css文件导入index.js。
   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：

   Java脚本

   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：从该文件中删除不必要的内容，并添加以下代码。

   Java脚本

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

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

npm start

输出：应用的主题是半机械人(深色主题)，这是输出。