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 },

];

Someone Special · Accepted Answer · 2020-11-23T08:31:51.663

5

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

edited Nov 23 '20 at 08:31

answered Nov 23 '20 at 06:36

Someone Special

12,479
7
45
76

my bad, I thought you wanted input text. Please check my renderOptions props. I've edited my answer – Someone Special Nov 23 '20 at 08:30
This code will shows and empty dropdown. How can I fix this? – shayanmalinda May 29 '22 at 05:47
u using v5? this answer is for v4. – Someone Special May 29 '22 at 05:48
Yes it is v5. Is there way to fix this for v5? – shayanmalinda May 29 '22 at 05:53
create your own question – Someone Special May 29 '22 at 05:58
Created it https://stackoverflow.com/questions/72421320/how-to-change-options-font-size-in-material-ui-version-5-autocomplete – shayanmalinda May 29 '22 at 06:07

score 0 · Answer 2 · answered Mar 04 '22 at 23:25

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.

How to change fontsize of options in Material ui autocomplete?

2 Answers2

Linked