title: React and Material UI - How to work backward to find layout, sizing, and container info
body: <p>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.</p>
  
  <p>For instance, I have an insanely simple login form basically copied and pasted from <a href="https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/templates/sign-in/SignIn.js" rel="nofollow noreferrer">here</a>.  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.</p>
  
  <p>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.</p>
  
  <p>Thanks!</p>
  
  <p><a href="https://i.stack.imgur.com/ZDzCQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZDzCQ.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/iZAeF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iZAeF.png" alt="enter image description here"></a></p>
  
  <p>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!
  <a href="https://i.stack.imgur.com/LsLa5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LsLa5.png" alt="enter image description here"></a></p>