0
903
ViewsCannot 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
3 answers
Answer question0
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 "}/>0
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
/>
0
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.