我对 React 和 Material UI 比较陌生。我已经很多年没有做过前端开发了，我正在修修补补。我真的很难弄清楚如何向后工作以在源代码中找到我要查找的内容，以识别格式问题、布局等。我将举一个例子，但实际上这是一个更广泛的问题如何调试和可视化 React 和 Material UI 生成的输出。
例如，我有一个非常简单的登录表单，基本上是从这里复制和粘贴的。在当前状态下，我有一个“眼睛”图标用于显示/隐藏密码。除了图标之外，文本框（材料 UI 输入字段）看起来几乎相同。我希望它们具有相同的宽度。我对 React 生成的内容、Material UI 生成的内容、如何准确识别哪些代码设置边框、颜色或字体大小等感到非常迷茫。Chrome 开发人员工具（包括 React 插件）很有帮助，但是在我的脑海中仍然是胡说八道 - 如此多的嵌套元素等等。
所以在下面的截图中，谁能告诉我如何通过代码“向后工作”来识别为什么顶部文本框与底部不同？（例如，父容器是否太宽/太窄）当我突出显示电子邮件的“FormControl”和密码的“FormControl”时，我找不到不同的特定部分。我在想某种容器。开发者工具的元素选项卡更加丑陋和混乱，无法解码。
谢谢！
甚至不知道从哪里开始这部分！我知道这是更原生的 HTML 而不是 React/Material 组件名称，但是类的数量等等是疯狂的！
