Javascript 创建React应用程序生成不会呈现所有元素

我在CreateReact应用程序中遇到了一个奇怪的问题

我正在构建一个应用程序，在运行npm run dev时，一切看起来都很好：

按钮文本来自API调用

然后我尝试了一个生产构建，所以我运行了npm运行构建，然后是serve-s构建，一切都很顺利，控制台让我转到http://localhost:5000，我做到了，然后它看起来像这样：

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

我打开了控制台http://localhost:5000，没有错误。我还从API获得了正确的响应，因此也可以正常工作。“网络”选项卡也不会显示任何错误；所有文件都正确加载了html、js、图像、css等等

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

知道是什么原因导致了这个问题吗？

问题 我觉得你已经将不透明度设置为一个很低的值，而问句div几乎是不可见的

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

解决方案 该值通常是介于0和1之间的值，尽管百分比至少在Chrome中仍然有效。基于基本CSS规则，我假设您在应用visible类时打算将该值设为1

对您的聊天区应用相同的设置

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

---

你能给我们提供一个测试和你做的任何调试细节吗？似乎React呈现组件很好，您的问题在浏览器中，即对DOM应用了什么样式/CSS。如果可以，请编辑您的问题，以包括呈现内容包装器div和子项的基本根组件，以及CSS样式。这将是一个更好、更完整的问题，对将来登陆这里的任何人都更有帮助。我也可以改变我的投票。非常感谢！这确实是问题所在。我把它放在100%，因为我认为这是正确的值，它对当地的发展起作用。但在构建它时，它似乎被解析为1%，无论出于什么原因。事实上，我只是把它设为1，它就工作了。

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