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

You can try by fontSize: "50px" – Hanif May 13 '18 at 19:37 — Hanif, May 13 '18 at 19:37
Are you trying with material ui next?? – Piyush Bhati May 14 '18 at 04:39 — Piyush Bhati, May 14 '18 at 04:39

score 79 · Accepted Answer · edited May 16 '22 at 20:14

79

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

edited May 16 '22 at 20:14

Mir-Ismaili

13,974
8
82
100

answered May 14 '18 at 04:25

noName94

3,783
1
16
32

correct me if I am wrong, property "input" is being set to the object "classes.resize"? I am using typescript, and it seems to be telling me that input takes a string? – Numnumberry Oct 03 '18 at 01:40
it's uppercase InputProps – aidinism Oct 28 '18 at 11:09
3

This should be `input: styles.resize` and `classNam={styles.textField}`. It's a bit frustrating that you didn't call the variable correctly. – Peter Weyand Jan 29 '19 at 21:35
`classes.resize` makes sense if `myComponent = withStyles(styles)( ( props ) => { ... } )` was used. Then `classes` is available from `const { classes } = props`. ` – kca Apr 15 '20 at 06:56

score 72 · Answer 2 · answered May 05 '19 at 13:18

72

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

answered May 05 '19 at 13:18

AlienKevin

2,691
2
17
19

1

but if outlined TextField is used, the outline will overlay some of the label text – Nova Sep 08 '20 at 06:23

score 16 · Answer 3 · answered Jan 07 '19 at 06:00

16

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.

answered Jan 07 '19 at 06:00

Carol Chen

897
7
14

score 5 · Answer 4 · answered Dec 12 '22 at 11:37

5

Use sx prop and target input base class MuiInputBase-input

 <TextField
          sx={{
            '.MuiInputBase-input': { fontSize: '1.25rem' },
          }}
/>

answered Dec 12 '22 at 11:37

kiranvj

32,342
7
71
76

score 3 · Answer 5 · answered Oct 30 '18 at 19:18

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

score 2 · Answer 6 · answered May 13 '18 at 22:55

<TextField inputStyle={styles.textField} />

Here is the full code:

import React from 'react';
import TextField from 'material-ui/TextField';

const styles = {
    textField: {
    fontSize: 50, //works!
 }
}

const Searchbox = (props) => {
return (
    <TextField
        onKeyDown={props.onKeyDown}
        id="with-placeholder"
        label="Add id"
        placeholder="id"
        inputStyle={styles.textField}
        margin="normal"
        autoFocus={true}
        helperText={"Add an existing id or select "}
    />
    );
};
export default Searchbox;

score 0 · Answer 7 · answered Mar 22 '19 at 09:22

<TextField
    type="text"
    className={classes.financing_input}
    placeholder={this.props.CustomerInfoData.phone}
    name="phone"
    id="fixInputSize" //Works 
    onChange={this.handleChange}
/>

//in your css file
#fixInputSize{
  font-family: Roboto;
  font-size: 11px;
}

score 0 · Answer 8 · answered Nov 05 '20 at 11:23

0

if you use sass for styling, you can also do this.

<Textfield className="custom-input" />

and then in your sass, write:

.custom-input {
  width: ....px;

  fieldset { /* settings like border-radius */ }

  input {
    font-size: 1.2rem;
  }
}

answered Nov 05 '20 at 11:23

Amir Gorji

2,809
1
21
26

score 0 · Answer 9 · answered Oct 16 '22 at 02:18

0

MUI its using a theme for styling all elements in a fast way, check out this useful tool https://bareynol.github.io/mui-theme-creator/

It allows you to understand how a simple modification of theme will affect the entire app design.

answered Oct 16 '22 at 02:18

Crypto-Frank

142
6

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/32953981) – Teymour Oct 21 '22 at 14:01

score -1 · Answer 10 · answered May 14 '18 at 05:32

-1

Try the with the prop inputStyle

inputStyle --> Override the inline-styles of the TextField's input element. When multiLine is false: define the style of the input element. When multiLine is true: define the style of the container of the textarea.

    <TextField
      inputStyle={{ fontSize: "50px" }}
      hintText="Hint Text"
    />

answered May 14 '18 at 05:32

Ashh

44,693
14
105
132

1

Please explain the reason for down vote. It will help me to improve the answer – Ashh Oct 01 '18 at 19:20
5

`inputStyle` is not a prop of `TextField` : https://material-ui.com/api/text-field/. (Or isn't anymore) – Treycos Feb 05 '19 at 08:46

Cannot change font size of text field in material ui

10 Answers10