你不必将 reactstrap 与 React 一起使用,但它是一个用于集成 Bootstrap 和 React 应用程序的流行库。 如果需要,可以按照以下步骤将其与 Create React App 集成:
从 npm 安装 reactstrap 和 Bootstrap 。 reactstrap 不包括 Bootstrap CSS 所以这也需要安装:
--- ------- ------ ---------- -----------
或者你可以使用 yarn
:
---- --- ----------- ----------
在 src/index.js
文件的开头导入 Bootstrap CSS 和可选的 Bootstrap 主题 CSS :
------ ----------------------------------- -- ------------ -- -----------------
在 src/App.js
文件或自定义组件文件中导入所需的 reactstrap 组件:
------ - ------ - ---- -------------
现在,你已准备好在 render 方法中定义的组件层次结构中使用导入的 reactstrap 组件。 这是使用 reactstrap 重构的 App.js
的示例。
使用自定义主题
注意:此功能适用于
react-scripts@2.0.0
及更高版本。
有时你可能需要调整 Bootstrap(或等效包)的视觉样式。
从 react-scripts@2.0.0
开始,你可以导入 .scss
文件。 这使得可以将包的内置 Sass 变量用于全局样式首选项。
要自定义 Bootstrap ,请创建一个名为 src/custom.scss
(或类似文件)的文件,然后导入 Bootstrap 源样式文件。 在导入的文件 之前 添加一些覆盖样式。 你可以参考 Bootstrap的文档 以获取可用变量的名称。
-- ----------- --------- ----- -- -- --------- ------ ------- ---------------------------------
注意: 你必须在
node_modules
之前添加~
前缀,如上所示。
最后,导入新创建的 .scss
文件,而不是 src/index.js
文件开头的默认 Bootstrap .css
,例如:
------ ----------------