javascriptreactjsmaterial-uimaterial-table

ReactJS: How to change placeholder font size of Material Ui Autocomplete?


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

enter image description here

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

                      
                    />
                  )}
                />

Solution

  • 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

    Edit Material demo (forked)