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.


Here's what I had to do to change the size of the text both before (label) and after (input text) the user interacts with the TextField component

<TextField
  id="MyTextField"
  InputProps={{
    classes: {
      input: classes.formTextInput
    }
  }}
  InputLabelProps={{
    classes: {
      root: classes.formTextLabel
    }
  }}
/>