[TextField] applying style height doesn't move all the elements properly

[jhanink]

choosing a shorter height to collapse the space between multiple vertically listed fields doesn't reposition the label, floating text label or input correctly

<div>
        <div style={this.style}>
          <TextField
            hintText="Please enter your first name"
            floatingLabelText="First Name"
              style={{border:'1px solid green',height:'40px'}}/>
        </div>
        <div style={this.style}>
          <TextField
            hintText="Please enter your middle name"
            floatingLabelText="Middle Name"
            style={{border:'1px solid green'}}/>
        </div>
        <div style={this.style}>
          <TextField
              hintText="Please enter your last name"
              floatingLabelText="Last Name"
              style={{border:'1px solid green'}}/>
        </div>
      </div>

[shaurya947]

I know we also have props for floatingLabelStyle and hintStyle. However, after some tinkering around, I haven't been able to get this use case working successfully using only those props (in a non-hacky way of course).

cc: @oliviertassinari do you also wanna take a look at this? I feel like some code would need to change in the TextField source..

[oliviertassinari]

We have kind of the same issue when we change the font size.
The component is using absolute value, it wasn't design with this concern in mind.
I'm wondering if flex box couldn't make our life easier here.

[djmccormick]

This is causing me pain as well.

[Dreculah]

It's nasty, but until we get something better in place, I'm using negative top margin:

  floatingLabelStyle={{
        marginTop: -10
  }}

[tintin1343]

I hope the above solution helps for now. TextField requires a re-write to do away with the styling issues.

I am closing this issue for now. If someone who has this issue does not gets help from the above solutions, please leave a comment below.

[Keagnn]

.MuiInput-input-25 {
padding: 25px 0px 8px;
}