response-autosuggest, как стилизовать ввод и самовнушение при использовании вместе с Material-ui

Question

Я использую response-autosuggest в моем компоненте Material-UI для получения предложений при вводе пользователем. И просто не в состоянии стилизовать поле ввода и текст предложений.

Вероятно, я упускаю что-то здесь c, и любое руководство будет чрезвычайно полезным. Официальный dox-autosuggest здесь для использования техники тем, использующей реагирующая тема . Но я не смог реализовать это в своем компоненте Material-UI.

Ниже приведен мой код, который я пытаюсь использовать.

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 => ({
  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 = () => {  
  const classes = useStyles()

  const [value, setValue] = useState('')
  const [suggestions, setSuggestions] = useState([])

  const onChange = (event, { newValue, method }) => {
    setValue(newValue)
  };

  const onSuggestionsFetchRequested = ({ value }) => {

    setSuggestions(getSuggestions(value))
  };

  const  onSuggestionsClearRequested = () => {
    setSuggestions([])
  };

  const inputProps = {
    placeholder: "Start typing your city name",
    value,
    onChange: onChange,    
  };


  return (
    <div className={classes.container}>
          <div className={classes.react_autosuggest__container} >
            <Autosuggest
              suggestions={suggestions}
              onSuggestionsFetchRequested={onSuggestionsFetchRequested}
              onSuggestionsClearRequested={onSuggestionsClearRequested}
              getSuggestionValue={getSuggestionValue}
              renderSuggestion={renderSuggestion}
              inputProps={inputProps}
          />
        </div>
        )}
    </div>
  )
}

export default GithubMostPopularList

Я также пытался this Решение дано в одном из выпусков Github

 <Autosuggest
      //misc extra props I've cut out for brevity
      theme={{
        ...defaultTheme,
        ...{
              container: {
                ...defaultTheme.container,
                display: 'visible',
                width: '340px',
              },
              //more overrides
            }
      }}
    />

Но в этом случае компонент вообще не компилируется.

Answer 1

Не уверен насчет того, что ты сделал. Это то, что я сделал, и он работает хорошо:

Один компонент с определением вашего стиля и компонентом Autosuggest, который вы отображаете:

import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles({
  container: {
    position: "relative",
  },
  input: {
    width: "240px",
    height: "30px",
    width: '80%',
    padding: "10px 20px",
    fontFamily: "Helvetica, sans-serif",
    fontWeight: "bold",
    fontSize: "16px",
    border: "1px solid #aaa",
    borderRadius: "4px"
  },
  inputFocused: {
    outlineStyle: "none"
  }
  // add other styling here...
});

const MyAutosuggest = (props) => {
  const inputProps = {
    placeholder: 'Type a programming language',
    value: props.value,
    onChange: props.onChange
  };
  const theme = useStyles();
  return( 
    <Autosuggest 
        suggestions={props.suggestions}
        onSuggestionsFetchRequested={props.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={props.onSuggestionsClearRequested}
        getSuggestionValue={getSuggestionValue}
        renderSuggestion={renderSuggestion}
        inputProps={inputProps} 
        theme={theme}
    />
  )
}

Я импортирую MyAutosuggest в компонент, где я реализовать автозаполнение:

import MyAutosuggest from './Autosuggest';

<MyAutosuggest 
    value={this.state.value} 
    onChange={this.onChange} 
    suggestions={this.state.suggestions} 
    onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
    onSuggestionsClearRequested={this.onSuggestionsClearRequested}
/>

Answer 2

Отвечая на мой собственный вопрос.

Я смог решить эту проблему, как показано ниже, часть useStyles = makeStyles () осталась прежней, и ниже показано, как изменить тему defulat реагировать на автозаполнение.

import { defaultTheme } from 'react-autosuggest/dist/theme';
....
....
const GithubMostPopularList = () => {

.....

.....

  return (
    <div className={classes.container}>
      {console.log('GITHUB USER ', JSON.stringify(globalStore.githubUser))}
      <div className={classes.tableAndFabContainer}>
        {globalStore.loading ? (
          <div className={classes.spinner}>
            <LoadingSpinner />
          </div>
        ) : (
          <div className={classes.table}>
          {console.log('VALUE IS ', value)}
          <div className={classes.inputandButtonContainer} >
            <Autosuggest
              suggestions={suggestions}
              onSuggestionsFetchRequested={onSuggestionsFetchRequested}
              onSuggestionsClearRequested={onSuggestionsClearRequested}
              getSuggestionValue={getSuggestionValue}
              renderSuggestion={renderSuggestion}
              inputProps={inputProps}
              theme={{
                ...defaultTheme,
                container: classes.react_autosuggest__container,
                input: classes.react_autosuggest__input,
                inputOpen: classes.react_autosuggest__input__open,
                inputFocused: classes.react_autosuggest__input__focused,
                suggestionsContainer: classes.react_autosuggest__suggestions_container,
                suggestionsContainerOpen: classes.react_autosuggest__suggestions_container__open,
                suggestionsList: classes.react_autosuggest__suggestions_list,
                suggestion: classes.react_autosuggest__suggestion,
                suggestionHighlighted: classes.react_autosuggest__suggestion__highlighted,
                }
              }

          />

        </div>
          </div>
        )}      
      </div>
    </div>
  )
}

export default GithubMostPopularList