Production 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%;
        }
    }

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

Production React 网站无法正确呈现

Production React website not rendering properly

html

css

reactjs

chakra-ui