Material-ui: [TextField] Letter-spacing consistency

[esseswann]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Default Typography letter-spacing and default TextField letter-spacing are inconsistent

It is not explicitly mentioned in the spec but you can see TextField typography is practically body1 style with corresponding letter-spacing and slight modification of color

Interestingly if you check out computed styles on the official website (which by the way do not exactly match the spec of body1) for input element you can see this

while MUI's letter-spacing is reset

Current Behavior 😯

Check this gif out for visual confirmation

Expected Behavior 🤔

TextField letter spacing should match default Typography variant. Presumably that should also apply to line-height

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.9.12 |

[oliviertassinari]

@esseswann Nice, thanks for the report. A great 👁️ for the details!

We rely on CSS inheritance from div > input to apply theme.typography.bod1. However, the user agent overrides our styles. What do you think of this diff? Do you want to submit a pull request?

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index f3026be1a..2b1f12b2b 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -84,6 +84,7 @@ export const styles = (theme) => {
     /* Styles applied to the `input` element. */
     input: {
       font: 'inherit',
+      letterSpacing: 'inherit',
       color: 'currentColor',
       padding: `${8 - 2}px 0 ${8 - 1}px`,
       border: 0,

[esseswann]

@oliviertassinari I suppose we should also address line-height and in general try to inherit everything font-related from the typographytheme defaults, stuff like text-rendering, RTL, etc. I can examine them in pull request but I would like an approval for inheriting them from the theme

[oliviertassinari]

I was wondering about line height too. Why not.

I'm not aware of any other CSS property we would need to reset from the user agent default styles. I would expect text rendering to inherit without any specific code.

[esseswann]

While fixing it I noticed this

Should it be of our concern?

[oliviertassinari]

I believe we already have an issue open for it.