How to change mui autocomplete background color in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To change mui autocomplete background color in React js, you can use style={{ backgroundColor: 'yellow' }}. It will change mui autocomplete background color.

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

Installation

Install the following packages to use change mui autocomplete background color 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 background color example.

The below code is an example of a Material UI autocomplete background color. you have use inline css style={{ backgroundColor: 'yellow' }}. Then we changed the background color.

App.js

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

export default function ComboBox() {
  return (
      <Autocomplete
      style={{ backgroundColor: 'yellow' , width: 300 }}
      options={['Option 1', 'Option 2', 'Option 3']}
      renderInput={(params) => (
      <TextField {...params} label="background color" variant="outlined" />
      )}
    />
  );
}

In the above code example, I have used the @mui/material component and change mui autocomplete background color.

Check the output of the above code example.

All the best 👍