如何更改 Material ui 自动完成中选项的字体大小？

Posted 2023-02-22

【中文标题】如何更改 Material ui 自动完成中选项的字体大小？

【英文标题】：How to change fontsize of options in Material ui autocomplete?

【发布时间】：2021-03-05 21:08:28

【问题描述】：

您好，我在我的项目中使用材料表，我想知道如何更改材料 ui 自动完成中选项的字体大小。谢谢

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 ,

];

【参考方案1】：

您需要使用renderOptions，以及您想要的组件。

 <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

【讨论】：

我的错，我以为你想要输入文本。请检查我的 renderOptions 道具。我已经编辑了我的答案