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 "} />

The most straight forward way to change the font size of both the input label and the input text is to use inline styling:

<TextField
  label="input label name here"
  margin="normal"
  inputProps={{style: {fontSize: 40}}} // font size of input text
  InputLabelProps={{style: {fontSize: 40}}} // font size of input label
/>

Edit QuizMaker


I'm on version 3.8.1 and I may have a slightly more straightforward solution.

On TextField

inputProps={{
  style: {fontSize: 15} 
}}

However, this may also involve tweaking lineHeight to make it look nicer.