Hi i am using material table in my project and i want to know how to change font size of options in material ui autoplete. Thank you

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autoplete from '@material-ui/lab/Autoplete';

export default function ComboBox() {
  return (
    <Autoplete
      id="bo-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. 
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },

];

Hi i am using material table in my project and i want to know how to change font size of options in material ui autoplete. Thank you

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autoplete from '@material-ui/lab/Autoplete';

export default function ComboBox() {
  return (
    <Autoplete
      id="bo-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./chart/top
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },

];

• javascript
• reactjs
• material-ui
• frontend
• material-table

Share Improve this question Follow asked Nov 23, 2020 at 6:34 theWanderertheWanderer 65622 gold badges1313 silver badges3434 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You need to use renderOptions, together with the ponent you want.

 <Autoplete
        id="bo-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

Mui uses ul li html elements to render the autoplete options, by overriding renderOption you can customize lis and their inner content as well (ul is already put by Mui) and set them your desired styles, classes, etc.

Use renderOption like this :

<Autoplete
    id='bo-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>
  )}
  />

Note that in above snippet, I emitted some of unmodified props like style, renderInput, etc to emphasize how to use renderOption prop, correctly and also for purpose of brevity.