React Bootstrap CSS覆盖其他组件样式 仅使用Modal样式如何解决

你可以通过以下三种方式实现只使用Modal组件样式、避免全局样式覆盖：

1. 抽取Modal独立样式
   直接从Bootstrap源码中提取Modal组件对应的CSS规则，以及它依赖的动画、层级相关的少量公共样式，将这些规则单独放到你项目的自定义样式文件中，仅保留.modal及其子元素相关的选择器，不会触发全局样式覆盖。注意先删除你现有代码中重复引入的本地Bootstrap CSS和CDN CSS。

2. 自定义编译Bootstrap仅引入必要模块
   如果你使用Sass预处理器，可以安装Bootstrap的Sass版本，仅导入Modal相关的Sass文件，跳过影响全局的reboot、排版、表单样式模块：
   首先安装依赖：
   npm install sass bootstrap
   然后在项目中新建custom-bootstrap.scss文件，写入以下内容：

// 仅导入基础工具，不引入全局样式
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
// 仅导入Modal及必要的动画样式
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/transitions";

最后在Modal组件中仅引入这个自定义的scss文件即可，不会产生全局样式污染。

3. 使用Shadow DOM隔离样式作用域
   如果不想调整样式引入逻辑，可以通过Shadow DOM将Modal组件包裹，让Bootstrap样式仅作用于组件内部，完全不影响外部页面样式，React中可以借助react-shadow库快速实现：

import root from 'react-shadow';
import Modal from 'react-bootstrap/Modal';

const CustomModal = (props) => {
  return (
    <root.div>
      <link 
        rel='stylesheet'
        href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css'
        integrity='sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We'
        crossOrigin='anonymous'
      />
      <Modal {...props}>
        {props.children}
      </Modal>
    </root.div>
  )
}

相关效果参考：

• 引入全局Bootstrap CSS后的异常效果：
  
• 未引入Bootstrap CSS时的正常效果：
  

内容的提问来源于stack exchange，提问作者ExtraSun