How to Change the Label Size of a Material UI Textfield

Changing font size of floating labels in Material UI v5

Unfortunately, while there are ways to change the text size of the label, there is no easy way to also adjust the "notch" size when using variant: outline.

Here's what I would do:

Set the font size for the OutlinedInput's notchedOutline class (This sets the width of the notch):

    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          fontSize: '2em'
        }
      }
    },

Set the font size for the MuiInputLabel's &.MuiInputLabel-shrink class to match (This sets the shrunken text size):

    MuiInputLabel: {
      styleOverrides: {
        outlined: {
          '&.MuiInputLabel-shrink': {
            fontSize: '2em',
          },
        }
      }
    },

3). (Optional) Also change the transform property on the MuiInputLabel's &.MuiInputLabel-shrink class (this can center the text in the outline line, you'll have to experiment with this and pick a number that works for your font size.):

    MuiInputLabel: {
      styleOverrides: {
        outlined: {
          '&.MuiInputLabel-shrink': {
            fontSize: '2em',
            transform: 'translate(14px, -19px) scale(0.75)'
          },
        }
      }
    },

Note: This is all done with style overrides inside your theme.js (docs: https://mui.com/customization/theme-components/#global-style-overrides)

Change the font size of a label material-ui

I ended up adding some code to my main mui theme.

const theme = createMuiTheme({
palette: {
  primary: {
    main: '#39870c',
    ligth: '#6cb842',
    dark: '#005900'
  },
  secondary: {
    light: '#01689b',
    main: '#0044ff',
    contrastText: '#ffcc00',
  },
},
overrides: {
  MuiInputLabel: { 
    root: { 
      color:'black',
      fontSize: 13, 
    },
  },
}

});

With overrides I could basically change anything. I hope this helps someone out in the future, because this was really annoying to find.

Width changes in material-ui TextField when label shrinks

One option is you can select the fieldset element to control/apply the custom width to overall component. E.g. applying style using the wrapper class in makeStyles.

wrapper: {
  maxWidth: "45px",
  width: "45", //for testing
  "& fieldset": {
    minWidth: 44,
    paddingRight: 0,
    marginRight: 0,
    paddingLeft: 0,
    marginLeft: 0
  }
},

Updated sandbox.

Cannot change font size of text field in material ui

As mentioned in the page TextField API apply styles to the InputProps which applies style to the input element.

Here is the code:

const styles = {
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    width: 300,
    margin: 100,
  },
  //style for font size
  resize:{
    fontSize:50
  },
}

<TextField
  id="with-placeholder"
  label="Add id"
  placeholder="id"
  InputProps={{
    classes: {
      input: classes.resize,
    },
  }}
  className={classes.textField}
  margin="normal"
  autoFocus={true}
  helperText={"Add an existing id or select "} />

How to change the font size of selected text in TextField Select from material-ui

You can do it using CSS

.MuiInput-input {
      font-size: 45px;
  }

But this is global for all TextField so you need to pass a classname to TextField and use below code

    <Grid item>    
        <TextField 
        label="Status"
        className="your-label-class"
        value={currentItem.status}
        onChange={this.onChangeStatus}
        variant="outlined"
        InputLabelProps={{ style: { fontSize: 14, fontFamily: "monospace" } }}
        select 
        >
        {this.state.status && this.state.status.map((item) => (
            <MenuItem style={{ fontSize: 14, fontFamily: "monospace" }} key={item.key} value={item.id}>
                {item.key}
            </MenuItem>
        ))}
        </TextField>     
    </Grid>

in CSS

.your-label-class .MuiInput-input {
      font-size: 45px;
  }

mui TextField label width problem, when I do font override

I got answer on github.

In your case, you need to customize the font size of the label and the
gap.

"& .MuiInputLabel-root, fieldset": {
  fontSize: "1.1rem",
}