react-autosuggest 在与 Material-ui 一起使用时如何设置输入和自动建议的样式

Question

我在我的 Material-UI 组件中使用 react-autosuggest 来在用户输入时获得建议。而且无法设置输入字段和建议文本的样式。

可能我在这里遗漏了一些基本的东西，任何指导都会非常有帮助。 official dox of react-autosuggest is here for using the theme technique that uses react-themeable。但是我无法在我的 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 solution given in one of Github issue

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

但在这种情况下，组件根本没有编译。

Answer 1

回答我自己的问题。

我能够如下解决它，useStyles = makeStyles() 部分保持不变，下面是如何更改 react-autosuggest 的 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

Answer 2

不确定你做了什么。这就是我所做的，效果很好:

一个包含您的样式定义的组件，以及您呈现的 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}
/>

react-autosuggest 在与 Material-ui 一起使用时如何设置输入和自动建议的样式

react-autosuggest how to style input and autosuggestion when using along with Material-ui

autosuggest

reactjs

material-ui