生产 React 网站无法正确呈现

Question

我开始使用 React 制作我的投资组合网站并想部署它。 本地提供的版本看起来和工作正常。将其部署到 Github Pages 和 Netlify 后，这两个网站似乎都无法正确呈现网站。仅显示页眉徽标和页脚。其他一切似乎都存在于 DOM 中，但却是不可见的。我也在使用 Chakra UI 来设置我的组件样式。这是回购：https://github.com/ShreeyansB/shreeyansb.github.io/tree/main

问题：https://imgur.com/LL2uSwB

所有按钮似乎都可以正常工作，只是它们不可见。

我打赌在使用 Chakra UI 时会出现一些错误，但我似乎找不到问题所在。 任何帮助将不胜感激。

Answer 1

这看起来像是 CSS 的问题。如果我从构建中删除 CSS 包含它可以正常工作

<link href="/static/css/main.a21f9a4b.chunk.css" rel="stylesheet">

在进一步检查构建 CSS 时，我看到如下样式。

@-webkit-keyframes Header_opacity__3wGpe {
        0% {
            opacity: 0;
        }
        to {
            opacity: 1%;
        }
    }

你确定 opacity 是 1% 吗？不应该是opacity:1吗？