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

Question

您好，我在我的项目中使用 material table，我想知道如何更改 material 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 },

];

Answer 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

Answer 2

Mui 使用 ul li html 元素来呈现自动完成选项，通过覆盖 renderOption 您可以自定义 lis 及其内部内容（ul 已经被 Mui 放置了）并设置你想要的样式，类，等等

像这样使用 renderOption :

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

请注意，在上面的代码片段中，我发出了一些未修改的道具，如 style、renderInput 等，以强调如何正确使用 renderOption 道具，同时也是为了简洁.

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

How to change fontsize of options in Material ui autocomplete?

javascript

reactjs

material-ui

frontend

material-table