tachyons & TextField with type="password"

When you have a TextField with type="password", the presence of a global CSS rule input[type="password"] { box-sizing: border-box; } will screw up rendering. The placeholder text renders lower than it should, so the line at the bottom of the text field passes through the text.

This seems to only happen for type="password" and not for other TextField types.

I noticed this because tachyons includes a global rule like this which causes the problem.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The TextField should render properly.

Current Behavior

The placeholder text renders too low.

Steps to Reproduce

https://codesandbox.io/s/github/thomasjm/material-ui/tree/textfield-password-issue/examples/gatsby

(You can see I just used react-helmet to stick the problematic CSS rule into the Gatsby example page.)

Context

I gather from #4422 that material-ui is supposed to gracefully handle either border-box or content-box. In this case it doesn’t, which causes a lot of confusion when trying to mix material-ui with tachyons.

[thomasjm]

Note: I just upgraded to Material UI v4 and now it seems this problem applies to input[type="text"] as well.

[oliviertassinari]

I gather from #4422 that material-ui is supposed to gracefully handle either border-box or content-box.

@thomasjm We do, we are allowing people to use content box or border box for their pages. However, in your case, you are explicitly overriding the Material-UI safeguard, it can’t work. Change the style injection order or remove this stye, or override a second time the style.