如何创建自己的 React Bootstrap 主题？
在本文中，我们将学习如何在网站 Themestr.app 上创建自己的 react-bootstrap 主题并将其添加到我们的 react 项目中。
特征：
- 无需考虑响应能力。
- 有多种颜色可供选择。
- 非常容易工作并集成到项目中。
先决条件：
- ReactJS 介绍和工作
- ReactJS 搭建开发环境
创建 React 应用程序并安装 Bootstrap：
第 1 步：使用以下命令创建一个 React 应用程序。
npx create-react-app project第2步：创建项目文件夹（即项目）后，使用以下命令移动到该文件夹。
cd project第 3 步：现在在您的工作目录（即项目）中安装 react-bootstrap
npm install react-bootstrap bootstrap按照步骤创建您自己的引导主题：
第 1 步：点击网站链接：https://themestr.app/ 并点击网站上的Start Here按钮。
第 2 步：之后是带有标题的页面 UI Kit Builder 将打开，在此页面中，您必须为您的主题选择调色板，选择后单击下一步按钮。
第3步：现在在这个页面上，我们必须为我们的主题选择一种字体，选择后我们点击下一步。
第4步：现在我们可以选择样式，选择它后移动到下一个。
第5步：最后我们将选择图标，选择图标后我们点击预览按钮。
第 6 步：在这一步中，我们可以更改颜色、更改字体大小、禁用或启用元素的属性等等。
步骤 7：在网站末尾自定义滚动并下载 CSS 文件后
将下载的文件添加到您的项目目录，然后将其导入您的App.js 。
示例：在此示例中，我们使用名为Bootstrap 5 (Default)的调色板自定义了一个基本主题，然后选择字体Bungee Shade ，保留更多选项以默认选择第一组图标，然后单击预览，这将显示所有您选择的组件可以在此页面中进一步自定义，例如颜色更改。我们选择了以下颜色：
Primary as #53565A, Secondary : #3DF5D6, Success #19AE32,Danger #862831,Info #09076E,Warning #FFC629,Light #CFE3F7,Dark #21084F
初始文件结构
将下载的CSS文件添加到src文件夹下的项目目录中并重命名，我们重命名为theme.css。
添加theme.css后
在 App.js 文件中，我们从 react-bootstrap 导入按钮组件。我们正在创建七个按钮，其中包含次要、成功、警告、危险、信息、浅色、深色等变体，它们将显示我们为创建的主题选择的颜色。
应用程序.js
Javascript
import './theme.css';
// Importing from react-bootstrap
import { Button } from 'react-bootstrap'
function App() {
return (
Colors According the customize theme
);
}
export default App;运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。
npm start输出：
