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

• 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:

https://github.com/mui-org/material-ui/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 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 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.