How to customize Autocomplete of MUI in react

Question

With the help of code can you tell me How to customize Autocomplete of MUI, in react?

Answer 1

The following approaches are used to customize the Autocomplete component in MUI in React:  

1. Custom Render Input 

   <Autocomplete

     options={options}

     renderInput={(params) => <TextField {...params} label="Custom Autocomplete" />}

   />

2. Custom Styling (Using `sx` or `styled`)  

   <Autocomplete

     sx={{ width: 300, backgroundColor: 'lightgray' }}

     options={options}

   />

3. Custom Option Rendering

   <Autocomplete

     options={options}

     renderOption={(props, option) => (

       <li {...props} style={{ color: 'red' }}>{option.label}</li>

     )}

   />

4. Controlled Component

   const [value, setValue] = useState(null);

   <Autocomplete

     value={value}

     onChange={(event, newValue) => setValue(newValue)}

     options={options}

   />