title: react-autosuggest how to style input and autosuggestion when using along with Material-ui
body: <p>I am using <strong><a href="https://github.com/moroshko/react-autosuggest" rel="nofollow noreferrer">react-autosuggest</a></strong> in my Material-UI component to get suggestions when user types. And just not able to style the input field and the suggestions text.</p>
  
  <p>Probably I am missing something basic here, and any guidance will be immensly helpful. The <a href="https://github.com/moroshko/react-autosuggest#theme-optional" rel="nofollow noreferrer"><strong>official dox of react-autosuggest is here</strong></a> for using the theme technique that uses <a href="https://github.com/markdalgleish/react-themeable" rel="nofollow noreferrer">react-themeable</a>. But I could not implement that in my Material-UI component.</p>
  
  <p>The below is my code that I am trying with.</p>
  
  <pre><code>import React, { useEffect, useState } from 'react'
  import PropTypes from 'prop-types'
  import { makeStyles } from '@material-ui/core/styles'
  import Autosuggest from 'react-autosuggest';
  import { defaultTheme } from 'react-autosuggest/dist/theme';
  
  const useStyles = makeStyles(theme =&gt; ({
    container: {
      margin: 'auto',
      backgroundColor: theme.background.default,
    },
    innerTableContainer: {
      height: 'calc(100vh - 190px)',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: theme.background.paper,
    },
    react_autosuggest__container: {
      "position": "relative",
      "width": "440px",
  
    },
    react_autosuggest__input: {
      "width": "240px",
      "height": "30px",
      "padding": "10px 20px",
      "fontFamily": "Helvetica, sans-serif",
      "fontWeight": "300",
      "fontSize": "16px",
      "border": "1px solid #aaa",
      "borderRadius": "4px"
    },
    react_autosuggest__input__focused: {
      "outline": "none"
    },
    react_autosuggest__input__open: {
      "borderBottomLeftRadius": "0",
      "borderBottomRightRadius": "0"
    },
    react_autosuggest__suggestions_container__open: {
      "display": "block",
      "position": "absolute",
      "top": "51px",
      "width": "280px",
      "border": "1px solid #aaa",
      "backgroundColor": "#fff",
      "fontFamily": "Helvetica, sans-serif",
      "fontWeight": "300",
      "fontSize": "16px",
      "borderBottomLeftRadius": "4px",
      "borderBottomRightRadius": "4px",
      "zIndex": "2"
    },
    react_autosuggest__suggestions_list: {
      "margin": "0",
      "padding": "0",
      "listStyleType": "none"
    },
    react_autosuggest__suggestion: {
      "cursor": "pointer",
      "padding": "10px 20px"
    },
    react_autosuggest__suggestion__highlighted: {
      "backgroundColor": "#ddd"
    }
  }))
  
  const GithubMostPopularList = () =&gt; {  
    const classes = useStyles()
  
    const [value, setValue] = useState('')
    const [suggestions, setSuggestions] = useState([])
  
    const onChange = (event, { newValue, method }) =&gt; {
      setValue(newValue)
    };
  
    const onSuggestionsFetchRequested = ({ value }) =&gt; {
  
      setSuggestions(getSuggestions(value))
    };
  
    const  onSuggestionsClearRequested = () =&gt; {
      setSuggestions([])
    };
  
    const inputProps = {
      placeholder: "Start typing your city name",
      value,
      onChange: onChange,    
    };
  
  
    return (
      &lt;div className={classes.container}&gt;
            &lt;div className={classes.react_autosuggest__container} &gt;
              &lt;Autosuggest
                suggestions={suggestions}
                onSuggestionsFetchRequested={onSuggestionsFetchRequested}
                onSuggestionsClearRequested={onSuggestionsClearRequested}
                getSuggestionValue={getSuggestionValue}
                renderSuggestion={renderSuggestion}
                inputProps={inputProps}
            /&gt;
          &lt;/div&gt;
          )}
      &lt;/div&gt;
    )
  }
  
  export default GithubMostPopularList
  </code></pre>
  
  <p>I have also tried <a href="https://github.com/moroshko/react-autosuggest/issues/400#issuecomment-355472703" rel="nofollow noreferrer"><strong>this solution given in one of Github issue</strong></a></p>
  
  <pre><code> &lt;Autosuggest
        //misc extra props I've cut out for brevity
        theme={{
          ...defaultTheme,
          ...{
                container: {
                  ...defaultTheme.container,
                  display: 'visible',
                  width: '340px',
                },
                //more overrides
              }
        }}
      /&gt;
  </code></pre>
  
  <p>But in this case the component is not compiling at all. </p>