我正在进行一个项目，该项目使用react引导程序中的Carousel。只有当我在应用程序中import "bootstrap/dist/css/bootstrap.min.css";时，这才有效。问题是这样做会改变整个应用程序的CSS，因为它有很多现有的UI，我需要重新修改。有没有一种方法可以只对carousel组件使用引导CSS，而不影响我的React应用程序的其余部分？
我试过在使用carousel组件的文件中导入bootstrap.min.css，而不是在App.js中。不过这似乎没有什么区别。
解决方案1:引导提供了选择性地将组件包括在scs中的选项。这需要有一个为您处理scs的构建设置，例如webpack、rollup或node-sas本身。
编辑：添加了所需scs类的最小集合。引导4.5
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/_variables";
@import "../node_modules/bootstrap/scss/_mixins";
@import "~bootstrap/scss/_carousel.scss";
代码片段显示了设置转盘样式所需的主要部分。但是，如果你看一下carousel.scss，你也必须导入引导函数的各种依赖项。有了它，就有可能拥有一个最小的引导配置与您所需的风格。
解决方案2:您可以在web组件中确定组件及其样式的范围。这样一来，bootstrap.min.css就不会从旋转木马web组件中泄漏样式。这种方法超出了问题的范围，没有考虑carousel如何与应用程序的其他部分协同工作，因为事件和JS交互也会受到影响。