ReactJs中使用Reactstrap的Jumbotron组件无法显示灰色背景问题

解决方案 #

• 检查样式引入顺序
  确保index.js中import 'bootstrap/dist/css/bootstrap.css'的引入顺序在所有自定义样式、其他UI库样式之前，避免bootstrap默认的Jumbotron样式被后续样式覆盖。如果你的其他bootstrap组件样式也未正常生效，先排查该css路径是否正确。

• 手动指定背景样式
  若排查引入顺序后问题仍存在，可直接给Jumbotron组件手动配置和官方一致的灰色背景，两种实现方式如下：

  1. 用bootstrap内置背景类：

  <Jumbotron className="bg-light">
    <Container >
      <span>登录</span> 
      <span> <input type="text" /></span>
    </Container>
  </Jumbotron>
  

  2. 用内联样式直接指定颜色值：

  <Jumbotron style={{backgroundColor: '#e9ecef', padding: '2rem 1rem'}}>
    <Container >
      <span>登录</span> 
      <span> <input type="text" /></span>
    </Container>
  </Jumbotron>
  

• 定位样式冲突
  如果还是不生效，打开浏览器开发者工具的元素面板，选中Jumbotron对应的DOM节点，查看已应用的样式列表中.jumbotron的background-color属性是否被划掉，即可找到覆盖默认背景的高优先级样式，针对性修改即可。

你当前使用的reactstrap 8.9.0和bootstrap 4.6.0版本完全兼容，不存在版本适配导致Jumbotron失效的问题。

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