【问题标题】：Create React App build doesn't render all elements [closed]创建 React App 构建不会呈现所有元素 [关闭]
【发布时间】：2021-01-31 19:46:44
【问题描述】：

我在创建 react 应用时遇到了一个奇怪的问题。

我正在构建一个应用程序，运行 npm run dev 时一切正常：

按钮文本来自 API 调用的位置。

然后我尝试了一个生产版本，所以我运行npm run build，然后运行serve -s build，一切都很好，控制台告诉我去http://localhost:5000，我做了，然后它看起来像这样：

突然间我的按钮不可见了。但最奇怪的是：他们肯定还在那里。我可以将鼠标悬停在它们上面，看到我的鼠标变成了一个指针，我仍然可以单击它们。我什至得到了每个按钮上的 console.logs，它们打印出按钮的标题，就像他们应该做的那样。

我在 http://localhost:5000 上检查了控制台，没有错误。我还从 API 中得到了正确的响应，因此也可以正常工作。网络选项卡也没有显示任何错误；所有文件均已正确加载（html、js、图像、css，随你命名）

我在 Chrome、Firefox 和 Safari 上都试过了，它们都有这个问题。

知道是什么原因造成的吗？

【问题讨论】：

您能提供给我们Minimal, Complete, and Reproducible Example 以及您完成的任何调试细节吗？似乎 React 可以很好地渲染组件，而您的问题出在浏览器中，即针对 DOM 应用了什么样式/CSS。
如果可以的话，您能否编辑您的问题以包含呈现content-wrapper div 和子项的基本根组件以及 CSS 样式。这将是一个更好、更完整的问题，这对将来登陆这里的任何人都会更有帮助。
我也可以更改我的投票。

【解决方案1】：

问题

我似乎将opacity 设置为非常低的值，并且问题 div 几乎不可见。

#questions.visible {
    left: 0;
    opacity: 1%;
}

解决方案

opacity 值通常是介于 0 和 1 之间的值，尽管百分比似乎仍然有效（至少在 Chrome 中）。根据基本 CSS 规则，我假设您打算在应用 visible 类时将此值设为 1。

#questions.visible {
    left: 0;
    opacity: 1;
}

为您的聊天区域应用相同的内容

#chat-area.visible {
    left: 0;
    opacity: 1;
}

【讨论】：

非常感谢！这确实是问题所在。我将其设置为 100%，因为我认为这是正确的值，并且它适用于本地开发。但是在构建它时，无论出于何种原因，它似乎都被解析为 1%。现在确实我只是把它设置为 1 并且它可以工作。