需要帮助使用 React、TypeScript 和 Parcel 调试 CSS 问题

Question

我主要是一名 Java 开发人员，我对我在这里使用的技术并不是 100% 熟悉，所以如果结果证明这是一个明显的答案，请原谅我。

我有一个用 Typescript 编写的 React 应用程序，它在部署之前通过 Parcel 捆绑器运行。 当我在我的开发机器上运行应用程序进行本地测试时，应用程序中复选框的间距看起来很棒：

问题是在我构建应用程序并在生产环境中运行它之后，复选框不再正确对齐：

我设法将其追踪到本地之间 CSS 的差异：

和生产：

如果您注意到，生产 CSS 在顶部 CSS 文件 ( .css-1h4ws66 ) 中有一个额外的margin-bottom: 0px 。 这是我的问题——它覆盖了.css-lidh19文件中的margin-bottom: 10px ，从而破坏了间距。 我的问题是我不知道 0px 底部边距是从哪里来的。 它似乎没有在应用程序中的任何 styles 中定义。

我意识到这对于任何人来说都不足以说“这是你的问题；这样做”，但如果有人对如何调查这个问题有任何想法，我将非常感谢我能得到的任何帮助在那个方向。

Answer 1

我没有找到为什么有一个margin-bottom: 0px首先导致了这个问题，但是我设法找到了定义 10px 边距的地方并添加了!important ，这解决了这个问题。

对于任何处理 chakra-ui 的人，不要只寻找属性margin-bottom 、 marginBottom ，甚至是简写mb 。 还要查找my属性，因为它们定义了组件的顶部和底部边距。