How to change mui autocomplete height in react js?
January 12, 2023Hi 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.
Installation
Install the following packages to use change mui autocomplete height in react js.
npm
npm install @mui/material @emotion/react @emotion/styled
yarn
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.
App.js
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 (
<Autocomplete
id="highlights-demo"
sx={{ width: 300 }}
options={top100Films}
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}>
<div>
{parts.map((part, index) => (
<span
key={index}
style={{
fontWeight: part.highlight ? 700 : 400,
}}
>
{part.text}
</span>
))}
</div>
</li>
);
}}
/>
);
}
// 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 },
{ 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.
All the best 👍