4

I'm relatively new to React and Material UI. I haven't done front end development in years, and I'm tinkering. I'm really struggling to figure out how to work backward to find what I'm looking for in the source code to identify formatting issues, layout, etc. I'm going to give an example, but really this is a broader question about how to debug and visualize the output that React and Material UI generate.

For instance, I have an insanely simple login form basically copied and pasted from here. In its current state I have an "eye" icon for showing/hiding the password. The text boxes (Material UI Input fields) appear to be nearly identical, aside from the icon. I want them to be the same width. I'm getting VERY lost in what's generated by React, what's generated by Material UI, how to identify exactly which bit of code is setting a border or color or font size, etc. Chrome Developer Tools (including React plugin) are helpful, but it's still nonsense in my head - so many nested elements and such.

So in the screenshots below, can anyone tell me how to "work backward" through the code to identify why the top text box isn't the same as the bottom? (for instance, is the parent container too wide/narrow) When I highlight the "FormControl" for the email and "FormControl" for the password I can't find the specific piece that's different. I'm thinking some kind of container. The Elements tab of the Developer Tools is even uglier and chaotic, impossible to decode.

Thanks!

enter image description here enter image description here

No idea where to even start with this part! I know this is the more native HTML rather than React/Material component names, but the number of classes and such is insane! enter image description here

mateoc15
  • 509
  • 5
  • 18
  • ...lots of text and screenshots, but no code at all, it may happen that you won't get your question answered – Yevhen Horbunkov Jun 10 '20 at 20:06
  • 1
    As I mentioned it's more of a process question about how to use the developer tools to answer my own questions, not so much specific to any set of code. – mateoc15 Jun 11 '20 at 00:04
  • I agree the question may be a little too abstract for most to answer, but I also think it's super valuable! I would very much love to understand how to work backwards to figure out where the CSS comes from. Guessing you've moved on since this it's been a year, but maybe you can post a new question specifically about "why is FormControl #1 narrower than FormControl #2?" – Chris Oct 30 '21 at 19:45

0 Answers0