How to change mui autocomplete height in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To change mui autocomplete height in React js, you can use height: 70px !important; in .MuiInputBase-input. It will change mui autocomplete height in react js.

Today, I am going to show you, how to change mui autocomplete height in react js.


Install the following packages to use change mui autocomplete height in react js.


npm install @mui/material @emotion/react @emotion/styled


yarn add @mui/material @emotion/react @emotion/styled

MUI material change mui autocomplete height example.

The below code is an example of a Material UI autocomplete height. You have to import @mui material autocomplete and use CSS class. MuiInputBase-input to set height: 70px !important;. It will changed height.


import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import parse from 'autosuggest-highlight/parse';
import match from 'autosuggest-highlight/match';
import "./App.css"

export default function Highlights() {
  return (
      sx={{ width: 300 }}
      getOptionLabel={(option) => option.title}
      renderInput={(params) => (
        <TextField {...params} label="Highlights" margin="normal" />
      renderOption={(props, option, { inputValue }) => {
        const matches = match(option.title, inputValue, { insideWords: true });
        const parts = parse(option.title, matches);

        return (
          <li {...props}>
              {, index) => (
                    fontWeight: part.highlight ? 700 : 400,

// Top 100 films as rated by IMDb users.
const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: 'Pulp Fiction', year: 1994 },
    title: 'The Lord of the Rings: The Return of the King',
    year: 2003,
  { title: 'The Good, the Bad and the Ugly', year: 1966 },
  { title: 'Fight Club', year: 1999 },
    title: 'The Lord of the Rings: The Fellowship of the Ring',
    year: 2001,
    title: 'Star Wars: Episode V - The Empire Strikes Back',
    year: 1980,
  { title: 'Forrest Gump', year: 1994 },
  { title: 'Inception', year: 2010 },
.MuiInputBase-input  {
  height: 70px !important;

In the above code example, I have used the @mui/material component and changed mui autocomplete height in react js.

Check the output of the above code example.

React, Mui, height

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts