I just cant figure this one out guys. I want to change the fontsize of the label thats with my textfield. So far i can only change the fontsize of the input, but not the label.

Textfield:

<TextField
 className={classes.TextField}
 id="input-with-icon-textfield"
 label="Zoeken"
 InputProps={{
 startAdornment: (
                  <InputAdornment position="start">
                         <Search />
                  </InputAdornment>
                                  ),
                 }}
 onChange={(e) => {this.setTextFilter(e.target.value);}}
 />

Added a picture so you can see what i mean with a label.

I just cant figure this one out guys. I want to change the fontsize of the label thats with my textfield. So far i can only change the fontsize of the input, but not the label.

Textfield:

<TextField
 className={classes.TextField}
 id="input-with-icon-textfield"
 label="Zoeken"
 InputProps={{
 startAdornment: (
                  <InputAdornment position="start">
                         <Search />
                  </InputAdornment>
                                  ),
                 }}
 onChange={(e) => {this.setTextFilter(e.target.value);}}
 />

Added a picture so you can see what i mean with a label.

• javascript
• reactjs
• material-ui

• post your render html here as well – baklazan Commented Nov 7, 2018 at 14:55

3 Answers 3

I ended up adding some code to my main mui theme.

const theme = createMuiTheme({
palette: {
  primary: {
    main: '#39870c',
    ligth: '#6cb842',
    dark: '#005900'
  },
  secondary: {
    light: '#01689b',
    main: '#0044ff',
    contrastText: '#ffcc00',
  },
},
overrides: {
  MuiInputLabel: { 
    root: { 
      color:'black',
      fontSize: 13, 
    },
  },
}


}); 

With overrides I could basically change anything. I hope this helps someone out in the future, because this was really annoying to find.

Another option here : insted overrides you can use as Typography component inside the label props. See the example

<TextField 
  label={
    <Typography variant="headline" component="h3"> Zoeken </Typography>
  } ..../>

Hope this will help someone.

We can use InputLabelProps and style object inside the TextField, something below

<TextField 
    InputLabelProps={{
         style: {
             fontSize: 18,
         }
    }}
..../>