javascript - How to change fontsize of options in Material ui autocomplete? - Stack Overflow

admin管理员组

文章数量:1414621

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.

本文标签： javascriptHow to change fontsize of options in Material ui autocompleteStack Overflow