Cannot change font size of text field in material ui

I am trying to learn material ui. I want to enlarge the text field on my page. However, the styles i embed with the field changes height, width and other properties except the size. Following is my code:

const styles = {
container: {
    display: 'flex',
    flexWrap: 'wrap',
},
textField: {
    // marginLeft: theme.spacing.unit,
    // marginRight: theme.spacing.unit,
    width: 300,
    margin: 100,
    fontSize: 50 //??? Doesnt work
}
}

Following is the stateless component(React):

const Searchbox = (props) => {
    
    const { classes } = props;

    return (
        <TextField
            onKeyDown={props.onKeyDown}
            id="with-placeholder"
            label="Add id"
            placeholder="id"
            className={classes.textField}
            margin="normal"
            autoFocus={true}
            helperText={"Add an existing id or select "}
        />
    );
};

export default withStyles(styles)(Searchbox);

I totally understand there is no rocket science as its a straightforward CSS in JS approach of applying styles.

However, I cannot override the base font size for my text field. Any help will be appreciated

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

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

<TextField inputStyle={styles.textField} />

Here is the full code:

import React from 'react';
import TextField from 'material-ui/TextField';

const styles = {
    textField: {
    fontSize: 50, //works!
 }
}

const Searchbox = (props) => {
return (
    <TextField
        onKeyDown={props.onKeyDown}
        id="with-placeholder"
        label="Add id"
        placeholder="id"
        inputStyle={styles.textField}
        margin="normal"
        autoFocus={true}
        helperText={"Add an existing id or select "}
    />
    );
};
export default Searchbox;

Try the with the prop inputStyle

> inputStyle --> Override the inline-styles of the TextField's input > element. When multiLine is false: define the style of the input > element. When multiLine is true: define the style of the container of > the textarea.

    <TextField
      inputStyle={{ fontSize: "50px" }}
      hintText="Hint Text"
    />

<TextField
    type="text"
    className={classes.financing_input}
    placeholder={this.props.CustomerInfoData.phone}
    name="phone"
    id="fixInputSize" //Works 
    onChange={this.handleChange}
/>

//in your css file
#fixInputSize{
  font-family: Roboto;
  font-size: 11px;
}

if you use sass for styling, you can also do this.

<Textfield className="custom-input" />

and then in your sass, write:

.custom-input {
  width: ....px;

  fieldset { /* settings like border-radius */ }

  input {
    font-size: 1.2rem;
  }
}