如何在资料UI版本5自动完成中更改选项字体大小？

Question

我想更改下拉项目的字体大小。

我尝试了不同的方法来改变字体大小如下，

How do I change Material UI Autocomplete font size?

How to change fontsize of options in Material ui autocomplete?

但这些方法并不适用于我，希望是因为它们适用于第4版。

这是我的自动完成组件。

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

Answer 1

它使用自定义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"/>}
/>

Answer 2

关于您的问题，您可以为选项字体大小设置renderOption和样式，下面是您可以尝试的示例。

​

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

​