在 React 应用程序中导入 Bootstrap CSS

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中导入和使用 Bootstrap CSS 来设置 create-react-app
  2. 在 React 中导入和使用 Bootstrap CSS 进行自定义 Webpack 配置
在 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-bootstrapreactstrap 库提供了很多定制机会,但它们的组件仍然只接受有限数量的 props,这可能会限制某些人。

一般来说,在这里和那里使用 Bootstrap CSS 没有任何问题。但是,如果你只使用少量的 Bootstrap CSS,那么导入整个库可能不值得。

最好找另一个框架或自己编写那些自定义样式。

Irakli Tchigladze avatar Irakli Tchigladze avatar

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