JSX渲染时div容器内第二个p标签无法显示问题求助

问题根因 #

• 属性不匹配：如果是原生HTML开发，代码中p标签使用的className是React框架专属的类名属性，原生HTML仅识别class属性，会导致两个p标签的样式无法正确加载；如果是React项目开发则该属性无问题。
• 父容器样式冲突：外层div同时绑定了notification和toasts两个样式类，两者的尺寸、内边距规则完全冲突：
  • .notification类设置了max-height: 100px、padding: 30px、overflow: hidden
  • .toasts类设置了固定height: 50px、padding: 20px 15px 10px 10px
    最终父容器实际可用内容高度不足20px，仅能容纳第一个p标签，第二个p标签超出容器范围后被overflow: hidden属性隐藏，无法显示。

解决方案 #

1. 修正类名属性：原生HTML开发场景下，将两个p标签的className属性改为class。
2. 移除冲突样式类：根据需求二选一保留外层div的样式类即可：
   • 保留notification类则删除toasts类，父容器默认有足够高度容纳两个p标签
   • 保留toasts类则删除notification类，同时修改.toasts的样式，将固定高度height: 50px改为min-height: 70px或height: auto，确保有足够空间展示全部内容
3. 调整冲突样式：如果需要同时保留两个类，可修改.toasts的高度规则，同时调整内边距适配内容高度即可。

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