[TextField] When changing font size, the text is not aligned.

[OriginLive]

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

Similiar Issues:

#8017

Current Behavior 😯

When overriding font size, the text does not align correctly.

Expected Behavior 🤔

Text should be in the center, there should be a prop accepting font size. Currently, it's using transformation to move the label upwards on click. The coordinates do not account for different font size.

Steps to Reproduce 🕹

Here's my following code:

const theme = createMuiTheme({
  typography: {
    fontFamily: 'Averta',
    fontWeightRegular: 500,
  },
 overrides: {
    MuiTextField: {
      root: {
        fontSize: '20px'
      },
    },
    MuiInputLabel: {
      shrink: {
        fontSize: '20px',
      },
      root: {
        fontSize: '20px',
      },
}
});

an example of such text field would look like:

As you can see, the text isn't aligned, it's meant to be aligned at 12px. To exaggerate the problem, look at the following:

It's even more obvious with larger fonts.

Context 🔦

I'm trying to change the height of the textfield component so that it matches our figma height and it's font-size (56px in height) and 20px font size. I assume it's also a problem to align with just using inputbase and outlined input.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.5
React	16.13.0
Browser	chrome-latest
TypeScript	3.8.3

[oliviertassinari]

@OriginLive Did you try to customize the transition? I don't think that we have any leverage to improve this problem. It requires to compute the right CSS transition x and y values.
Do you have a codesandbox reproduction?

[OriginLive]

@oliviertassinari could you give an example of how to override a label transition and how to center it correctly? Here's an example in codesandbox:
https://codesandbox.io/s/busy-pare-oj517

[oliviertassinari]

@OriginLive Definitely! Here we go:

const theme = createMuiTheme({
  typography: {
    fontFamily: "Averta",
    fontWeightRegular: 500
  },
  overrides: {
    MuiOutlinedInput: {
      root: {
        fontSize: "20px"
      },
      input: {
        padding: "16px 14px",
        height: 56,
        boxSizing: "border-box"
      }
    },
    MuiInputLabel: {
      root: {
        fontSize: "20px"
      },
      outlined: {
        transform: "translate(14px, 19px) scale(1)"
      }
    }
  }
});

https://codesandbox.io/s/lingering-haze-hnop1

[OriginLive]

@oliviertassinari
thanks, however that example also changes the height of the field. The idea here is to have a 20px font in 56px height.

[oliviertassinari]

@OriginLive Ok, updated

[OriginLive]

@oliviertassinari could you please explain how you got the 19px in "translate(14px, 19px) scale(1)" for future reference please. And the padding size.

[oliviertassinari]

19px is limited to the fact that it feels right. In #8017, I think that we come to the conclusion that we can't easily write CSS that displays great value for any potential configurations.

[OriginLive]

I assume padding is the same? Damn, it would be nice to have that calculated somewhere.

[oliviertassinari]

The padding value is less important, I couldn't get a "round" line-height value based on the font and font-size so I went with something that would be a bit below 56px, and set it with an explicit height CSS property.

[OriginLive]

@oliviertassinari just to let you know, there's also a way to use:

    MuiInputBase: {
      root: {
        fontSize: '20px',
        lineHeight: '23px',
      },
      input: {
        height: '0.95em',
      }
    },

instead of

MuiOutlinedInput: {
      input: {
        padding: "16px 14px",
        height: 56,
        boxSizing: "border-box"
      }
    },

part.

The em part scales better i believe. Not quite sure how it affects everything else, but i feel like border-box with height seems a bit hackish.