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

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

CodePudding user response：

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

CodePudding user response：

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>)
            }
/>