How to change fontsize of options in Material ui autocomplete?

Question

Hi i am using material table in my project and i want to know how to change font size of options in material ui autocomplete. Thank you

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },

];

Answer 1

Mui uses ul li html elements to render the autocomplete options, by overriding renderOption you can customize lis and their inner content as well (ul is already put by Mui) and set them your desired styles, classes, etc.

Use renderOption like this :

<Autocomplete
    id='combo-box-demo'
    options={top100Films}
    renderOption={(props, option) => (
    <li key={option} {...props}>
      <Typography style={{ fontSize: '1.1rem' }}>{option}</Typography>
      //<Typography variant='h6' >{option}</Typography>
      //<Typography className='font-large yourDesiredClass' >{option}</Typography>
    </li>
  )}
  />

Note that in above snippet, I emitted some of unmodified props like style, renderInput, etc to emphasize how to use renderOption prop, correctly and also for purpose of brevity.

Answer 2

You need to use renderOptions, together with the component you want.

 <Autocomplete
        id="combo-box-demo"
        options={top100Films}
        renderOption={(option) => (
          <Typography style={{ fontSize: "1.5rem" }}>{option.title}</Typography>
        )}
        getOptionLabel={(option) => option.title}
        style={{ width: 300 }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            inputProps={{ ...params.inputProps, style: { fontSize: "1rem" } }}
          />
        )}
      />

Codesandbox