Cannot change font size of text field in material ui

Question

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

Answer 1

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

Answer 2

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