Cannot change font size of text field in material ui : <p>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:</p>

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

<p>Following is the stateless component(React):</p>

<pre><code>const Searchbox = (props) =&gt; {

    const { classes } = props;

    return (
        &lt;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 "}
        /&gt;
    );
};

export default withStyles(styles)(Searchbox);
</code></pre>

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

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