在 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-bootstrap
和 reactstrap
库提供了很多定制机会,但它们的组件仍然只接受有限数量的 props
,这可能会限制某些人。
一般来说,在这里和那里使用 Bootstrap CSS 没有任何问题。但是,如果你只使用少量的 Bootstrap CSS,那么导入整个库可能不值得。
最好找另一个框架或自己编写那些自定义样式。
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