使用 semantic-ui 时，h2 元素在 React 中不可见

Question

h2 元素在使用 semantic-ui

时在 React 中不可见

我在 App 中嵌入了 2 个组件。第一个是显示字符串 'Contact Manager' 的 header 组件第二个组件是 AddContact，是一个仅包含 2 个字段的表单：姓名、电子邮件。

现在，有趣的是，AddContact 中的 h2 元素在呈现时不可见。

谁能告诉我，为什么 h2 元素被隐藏了？

上面分享的url代码沙箱，直接游标到h2元素代码。

code sandbox渲染的react app可以直接访问https://4f4xr.csb.app/

从我这边，我开始知道，使用 className="ui fixed menu" 是隐藏下面的内容。但是，我不确定为什么会这样。

谢谢。

Answer 1

固定菜单覆盖h2元素。

.ui.menu.fixed {
    position: fixed;
    z-index: 101;
    margin: 0;
    width: 100%;
}

如果将 position:fixed 替换为 position:relative，h2 元素应显示在菜单下方。

要解决此问题，您可以在 h2 或容纳它的容器上方添加顶部填充，或在必要时添加边距。

h2 element is not visible in React while using semantic-ui