I want to change the placeholder fontsize of Material Ui Autocomplet. Is there any way?

             <Autocomplete
                  multiple
                  id="tags-outlined"
                  options={top100Films}
                  getOptionLabel={(option) => option.title}
                  defaultValue={[top100Films[13]]}
                  filterSelectedOptions
                  size="small"

                  renderInput={(params) => (
                    <TextField
                      {...params}
                     
                      variant="outlined"

                      placeholder="Enter Transshipment Ports"

                      
                    />
                  )}
                />

I want to change the placeholder fontsize of Material Ui Autocomplet. Is there any way?

             <Autocomplete
                  multiple
                  id="tags-outlined"
                  options={top100Films}
                  getOptionLabel={(option) => option.title}
                  defaultValue={[top100Films[13]]}
                  filterSelectedOptions
                  size="small"

                  renderInput={(params) => (
                    <TextField
                      {...params}
                     
                      variant="outlined"

                      placeholder="Enter Transshipment Ports"

                      
                    />
                  )}
                />

• javascript
• reactjs
• material-ui
• material-table

4 Answers 4

In your example, you can target the input element of the component you render in renderInput which is TextField using makeStyles

const useStyles = makeStyles({
  customTextField: {
    "& input::placeholder": {
      fontSize: "20px"
    }
  }
})

<TextField
  classes={{ root: classes.customTextField }}
  {...params}
  variant="outlined"
  placeholder="Enter Transshipment Ports"
/>

Example below using forked MUI demo

The sx property allows users to override the styling applied to the MuiFormLabel-root object, including the font size. This is useful for creating custom labels that better suit the user's design needs.

<TextField
        {...props}
        sx={{
          '& .MuiFormLabel-root': {
            fontSize: '0.8rem',
          },
        }}
      />

You can just add the ::placeholder css to the class/id of the input field, and change the font-size

Example:

#tags-outlined::placeholder {
   font-size: 14px;
}

there are some answers here almost on point, however not precise. the least intrusive way, using mui styles, for mui ~v5 and working is:

<TextField ... sx={{'& ::placeholder':{fontSize:'small'}}} />