HTML 类未在浏览器中加载

Question

在下面的代码中:

<div id="homePage">
   <div class="hero">
          
   </div>
 </div>

localhost 和 heroku 都不接受类“hero”到嵌套的 div 中。所有其他类(class)都会在检查时出现，但不会出现在这个类(class)中。如果我检查 div 并在那里手动添加类，则会显示应用于该类的所有相关样式。为什么浏览器可能拒绝只加载一个类属性？

注意我正在使用 react-bootstrap。

更新:我附上图片以作进一步说明

这是在我的编辑器中编写的源代码:

如果您检查一下代码是如何编译到浏览器中的(您会注意到#homePage id 应用于外部 div，但 .hero 类未应用于内部 div。这是源代码我的困惑。

我可以手动将 .hero 类添加到 devtools 元素选项卡中，使其看起来像这样:

如果是这样，应用于该类的所有样式都会按预期填充视口(viewport)，但显然这不是永久性的，因为它会在刷新时全部消失。

希望澄清事情。谢谢。

Answer 1

我找到了问题的答案。在 react-bootstrap 中，用于添加类的标记对于 JSX 与在常规 HTML 中是不同的。而不是

<div class="hero">

你必须标记它:

<div className="hero">

填充 id 的原因是将 id 应用于 JSX 中的元素与在 HTML 中相同。