如何使用 React、TypeScript 和 Parcel 调试 CSS 问题
How to debug a CSS issue using React, TypeScript, and Parcel
我主要是一名 Java 开发人员，我并不是 100% 熟悉我在这里使用的技术。
我有一个用 TypeScript 编写的 React 应用程序，它在部署之前通过 Parcel 打包器获取 运行。当我 运行 在我的开发机器上进行本地测试的应用程序时，应用程序中复选框的间距看起来很棒：
问题是在我构建应用程序并将其投入生产后 运行，复选框不再正确对齐：
我设法追踪到 CSS 与本地之间的差异：
和生产：
如果您注意到，作品 CSS 在顶部 CSS 文件 (.css-1h4ws66) 中有一个额外的 margin-bottom: 0px。这是我的问题——它覆盖了 .css-lidh19 文件中的 margin-bottom: 10px，从而破坏了间距。
我的问题是我不知道 0px 底部边距是从哪里来的。它似乎没有在应用程序的任何样式中定义。
我知道这些信息不足以让任何人说“这是你的问题；做那个”，但是我对如何调查这个问题的任何想法都很感兴趣。
我一开始没找到为什么有一个margin-bottom: 0px导致这个问题，但是我设法找到了定义10px边距的地方并添加了!important，这解决了问题。
对于处理脉轮 ui 的任何人，不要只寻找属性 margin-bottom、marginBottom，甚至 shorthand mb。还要查找 my 属性，因为它们定义了组件的顶部和底部边距。
我主要是一名 Java 开发人员，我并不是 100% 熟悉我在这里使用的技术。
我有一个用 TypeScript 编写的 React 应用程序，它在部署之前通过 Parcel 打包器获取 运行。当我 运行 在我的开发机器上进行本地测试的应用程序时，应用程序中复选框的间距看起来很棒：
问题是在我构建应用程序并将其投入生产后 运行，复选框不再正确对齐：
我设法追踪到 CSS 与本地之间的差异：
和生产：
如果您注意到，作品 CSS 在顶部 CSS 文件 (.css-1h4ws66) 中有一个额外的 margin-bottom: 0px。这是我的问题——它覆盖了 .css-lidh19 文件中的 margin-bottom: 10px，从而破坏了间距。
我的问题是我不知道 0px 底部边距是从哪里来的。它似乎没有在应用程序的任何样式中定义。
我知道这些信息不足以让任何人说“这是你的问题；做那个”，但是我对如何调查这个问题的任何想法都很感兴趣。
我一开始没找到为什么有一个margin-bottom: 0px导致这个问题，但是我设法找到了定义10px边距的地方并添加了!important，这解决了问题。
对于处理脉轮 ui 的任何人，不要只寻找属性 margin-bottom、marginBottom，甚至 shorthand mb。还要查找 my 属性，因为它们定义了组件的顶部和底部边距。