导入 bootstrap 但只导入一个组件

IT技术 twitter-bootstrap reactjs
2021-04-16 06:23:33

我有一个使用编译为 css 文件的本地 scss 的 React 网站。但是现在我想在一个且只有一个组件中使用 Bootstrap。

我已经关注了https://reactstrap.github.io/并让它工作了。但是引导程序现在应用于所有站点,因为我有这个

import 'bootstrap/dist/css/bootstrap.min.css';

在我的index.js文件中

如果我随后取出导入index.js并将其放入我的组件中,引导程序仍会应用于整个站点。

我是否必须将引导程序导入到这个组件中,并且只使用某种形式的 React css-module 加载这个组件?有没有办法限制引导整个 css 文件的范围?

我知道在javascript中可以动态完成这样的事情,下面的伪代码

var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);

然后可以再次添加

1个回答

您可以根据需要自定义引导程序吗?

您在引导程序网页中有该选项。只需选择您需要应用到您需要的组件的组件。

https://getbootstrap.com/docs/3.3/customize/

我也发现了这篇文章,我不太确定它是否与您的问题相同,但非常相似:

如何使 React CSS 导入组件范围?

另一个类似的帖子:

限制引导程序样式的范围

你可能想检查一下。