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