reactjs自定义组件的CSS在舞台环境中是不同的

Question

我是新手 Web 开发人员和 stakeoverflow。我正在使用 Reactjs 作为 FE 框架。在我当前的任务中，我注意到 CSS 样式在阶段和我的本地开发之间表现不同。我无权访问阶段服务器中部署的代码来检查此问题是否与服务器有关。这个错误是在我的代码合并到阶段后出现的，所以我认为这个问题可能不是来自我们的阶段服务器（缓存问题，依赖/环境问题......），这可能是由于我在代码中的错误。

在本地开发中（div 是四舍五入的，期望的输出）：

合并到舞台后（div是平方的，bug）：

• DateRange.tsx 是一个渲染这个 的功能组件，它将被其他组件使用，比如 A.tsx
• 在本地开发中，我正在编辑 DateRange.tsx 组件中的代码，以及使用它的所有文件
• 我们将这些更改部署到舞台上，并注意到 CSS 样式存在错误，而该错误并未出现在开发环境中。
• 我们决定还原我的代码，我们已经确保还原的代码与合并前的代码 100% 相同。
• 将还原的代码合并到阶段后，CSS bug 仍在阶段。

我从不编辑任何样式功能，也从不在整个开发过程中添加依赖项。我试过用不同的浏览器和不同的机器访问舞台。我在这里寻求一些建议为什么会发生。这个 CSS 问题在本地开发中从未发生过。

万分感谢！

Answer 1

我有2个建议给你：

1. 尝试在本地开发和暂存中打开浏览器开发工具来查找问题。比较两者的css，试图找到确切的行差异。
2. 在大多数情况下，暂存部署将具有您在本地开发时没有的额外优化。缩小器可能会改变您在生产构建中的 css 类，导致它们无法正确应用。

关于恢复不起作用，我没有好的建议（除了缓存问题），这很奇怪。