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