Cannot Change Font Size of Text Field in Material Ui

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

Material UI Textfield Can't Change Font Size for Multiline

You just need to use InputProps (uppercase "I") instead of inputProps. The lowercase inputProps are passed to the final textarea element, but for the styling to work properly, the InputBase component that wraps the textarea in a div needs to have the correct font size.

Here's a working example:

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";

function App() {
  return (
    <div className="App">
      <TextField multiline InputProps={{ style: { fontSize: 40 } }} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Material UI - Change Font Size of TextField from Functional Component

You can change the font size with inline styles this way:

<TextField inputProps={{ style: { fontSize: "5rem" } }} />

There is nothing about withStyles that cares whether your component is a function component or a class, so if you want to use classes, you could do something like:

const FormObjectTextStyled = withStyles(styles)(FormObjectText);

and then access the classes prop inside FormObjectText.

Here's a sandbox showing both approaches:

How to change the font size of selected text in TextField Select from material-ui

You can do it using CSS

.MuiInput-input {
      font-size: 45px;
  }

But this is global for all TextField so you need to pass a classname to TextField and use below code

    <Grid item>    
        <TextField 
        label="Status"
        className="your-label-class"
        value={currentItem.status}
        onChange={this.onChangeStatus}
        variant="outlined"
        InputLabelProps={{ style: { fontSize: 14, fontFamily: "monospace" } }}
        select 
        >
        {this.state.status && this.state.status.map((item) => (
            <MenuItem style={{ fontSize: 14, fontFamily: "monospace" }} key={item.key} value={item.id}>
                {item.key}
            </MenuItem>
        ))}
        </TextField>     
    </Grid>

in CSS

.your-label-class .MuiInput-input {
      font-size: 45px;
  }

Changing font size of floating labels in Material UI v5

Unfortunately, while there are ways to change the text size of the label, there is no easy way to also adjust the "notch" size when using variant: outline.

Here's what I would do:

1. Set the font size for the OutlinedInput's notchedOutline class (This sets the width of the notch):

    MuiOutlinedInput: {
      styleOverrides: {
        notchedOutline: {
          fontSize: '2em'
        }
      }
    },

2. Set the font size for the MuiInputLabel's &.MuiInputLabel-shrink class to match (This sets the shrunken text size):

    MuiInputLabel: {
      styleOverrides: {
        outlined: {
          '&.MuiInputLabel-shrink': {
            fontSize: '2em',
          },
        }
      }
    },

3). (Optional) Also change the transform property on the MuiInputLabel's &.MuiInputLabel-shrink class (this can center the text in the outline line, you'll have to experiment with this and pick a number that works for your font size.):

    MuiInputLabel: {
      styleOverrides: {
        outlined: {
          '&.MuiInputLabel-shrink': {
            fontSize: '2em',
            transform: 'translate(14px, -19px) scale(0.75)'
          },
        }
      }
    },

Note: This is all done with style overrides inside your theme.js (docs: https://mui.com/customization/theme-components/#global-style-overrides)

Change the font size of a label material-ui

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.

---

Related Topics