How to change options font size in Material UI Version 5 Autocomplete?

Question

I want to change the font size of the drop down items.

I tried different ways of changing font size as follows,

How do I change Material UI Autocomplete font size?

How to change fontsize of options in Material ui autocomplete?

But those ways are not working for me, hope it is due to they are for version 4.

Here is my Autocomplete component.

<Autocomplete
   size="small"
   disablePortal
   options={getVisaOptions()}
   renderInput={(params) => <TextField  {...params} label="Select VISA"/>}
/>

Font size of which part of component? drop down items? header? input? — Someone Special, May 29 '22 at 06:14

score 3 · Answer 1 · answered May 29 '22 at 06:22

3

it worked with customizing renderOption

<Autocomplete
    size="small"
    disablePortal
    options={getVisaOptions()}
    getOptionLabel={(option) => option.label}
    renderOption={(props, option) => (
        <Box style={{fontSize: 14}} {...props}>
            {option.label}
        </Box>
    )}
    renderInput={(params) => <TextField  {...params} label="Select VISA"/>}
/>

answered May 29 '22 at 06:22

shayanmalinda

1,925
3
12
23

Thank you! I got here from your prior post at https://stackoverflow.com/questions/64963549/how-to-change-fontsize-of-options-in-material-ui-autocomplete when I was having the exact same issue. – Dave Dec 20 '22 at 22:06

score 0 · Answer 2 · answered May 29 '22 at 09:33

About your question, you could set renderOption and set style for the option font size, here is my example you can try.

<Autocomplete
   size="small"
   disablePortal
   options={getVisaOptions()}
   renderInput={(params) => <TextField  {...params} label="Select VISA"/>}
   renderOption={(props, option) => (
             <Typography sx={{fontSize: 18}}>
                {option.label}
             </Typography>)
            }
/>

How to change options font size in Material UI Version 5 Autocomplete?

2 Answers2

Linked