Search code examples
cssreactjsmaterial-uilabel

How to properly change the font size from MUI TextField Label

I would like to be able to change the label fontSize from the material ui TextField component. I've come up with the InputLabelProps which works great, but as you can see in the picture bellow the label is too squeezy when focused

enter image description here

Here is my implementation of the TextField

<TextField {...params} InputLabelProps={{
    style : {color: '#518eb9', fontSize: 18, fontWeight: 1000}
}} label="Hovedkategori" />

I've found out that the label displayed when focused actually comes from another tag:

<legend class="css-1ftyaf0"><span>Hovedkategori</span></legend>
Solution

  • If you want resolve this problem you should add into your TextField component an css that modify MuiOutlinedInput-notchedOutline class. With sx you can modify this class, and set the same font-size for fix your problem.

    "&.MuiOutlinedInput-notchedOutline": { fontSize: "28px" }

    <TextField
    InputLabelProps={{
      sx: {
        color: "#518eb9",
        fontSize: "28px",
        fontWeight: 1000,
        "&.MuiOutlinedInput-notchedOutline": { fontSize: "28px" }
      }
    }}
    label="Hovedkategori"
  />