title: How do I make the Material UI AutoComplete component look like the one on the Material UI website
body: <p>The Material UI website has many examples of how to configure the <code>AutoComplete</code> component, but strangely it does not give an example of the most common use case ... a search input in the page header.</p>
  <p>They clearly know how to do it, because the one on the Material UI website itself is exactly what I want. Go to any page on <a href="https://material-ui.com/" rel="nofollow noreferrer">https://material-ui.com/</a> and the header area contains a search box that contains a search icon, is a reasonable size for the header, expands when it receives focus, and has white text (because the header has a solid color). Unfortunately inspecting the element didn't really help.</p>
  <p>I got pretty close after several hours of playing around, but my search box is still too large, doesn't look nearly as good as the one on the Material UI website, and stubbornly refuses to display anything other than black text.</p>
  <p>This is the code I have</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useEffect } from 'react';
  import { TextField, makeStyles } from '@material-ui/core';
  import Autocomplete from '@material-ui/lab/Autocomplete';
  import SearchIcon from '@material-ui/icons/Search';
  import clsx from 'clsx';
  
  const useStyles = makeStyles((theme) =&gt; ({
    root: {
      display: 'flex',
      alignItems: 'center',
    },
    searchIcon: {
      padding: theme.spacing(0, 2),
      paddingTop: theme.spacing(2),
      width: theme.spacing(7),
      pointerEvents: 'none',
      display: 'inline-block',
    },
    inputText: {
      display: 'inline-block',
      color: 'white',
      transition: theme.transitions.create('width'),
      [theme.breakpoints.up('md')]: {
        marginLeft: theme.spacing(1),
        width: '12ch',
        '&amp;:focus': {
          width: '20ch',
        },
      },
    },
  }));
  
  export const SearchBox = ({ className }) =&gt; {
    const classes = useStyles();
    const [searchResult, setSearchResult] = useState([]);
  
    useEffect(() =&gt; {
      setSearchResult([
        { id: '01', type: 'View', matchingText: ' Hello world 1' },
        { id: '02', type: 'Node', matchingText: ' Hello world 2' },
        { id: '03', type: 'View', matchingText: ' Hello world 3' },
        { id: '04', type: 'Node', matchingText: ' Hello world 4' },
      ]);
    }, []);
  
    return (
      &lt;div className={clsx(classes.root, className)}&gt;
        &lt;Autocomplete
          classes={{ root: classes.autocompleteRoot }}
          freeSolo
          disableClearables
          options={searchResult}
          groupBy={(option) =&gt; option.type}
          getOptionLabel={(option) =&gt; option.matchingText}
          renderInput={(params) =&gt; (
            &lt;&gt;
              &lt;div className={classes.searchIcon}&gt;
                &lt;SearchIcon /&gt;
              &lt;/div&gt;
              &lt;TextField
                {...params}
                label=&quot;Search&quot;
                classes={{ root: classes.inputText }}
                margin=&quot;normal&quot;
                variant=&quot;outlined&quot;
                InputProps={{ ...params.InputProps, type: 'search' }}
              /&gt;
            &lt;/&gt;
          )}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  export default SearchBox;
  
  </code></pre>